角4+材料设计.可移动芯片

Question

我需要像上面这样的可移动芯片：

https://material.angularjs.org/latest/demo/chips

但是我必须把它写成角4，我怎么才能把这些芯片https://material.angular.io/components/chips/overview重做可移除呢？

现在，我必须将它绑定到这样的文本区域：

<div class="row">
            <div class="form-group col-md-6">
                <label for="myChips">Chips:</label>
                <textarea class="form-control" rows="2" type="text" id="myChips" [(ngModel)]="myChips" name="myChips" placeholder="Write chips here"></textarea> 
            </div>
        </div>

我如何绑定这些芯片，如angularjs.org中的示例所示？

Answer 1

首先将font-awesome导入到您的项目中，或者有一个可用的close图标(我在示例中使用了字体-太棒了)。

然后，您可以在芯片中添加icon并向其添加一个click事件。单击close图标时，传递它的索引并从它的原点删除它。

示例html：

<md-chip-list>
  <md-chip *ngFor="let chip of chips; let i = index"  
           color="accent">
    {{chip}}
    <i class="fa fa-close" (click)="remove(i)"></i>
  </md-chip>
</md-chip-list>  

component.ts：

chips = [
 'Apple',
 'Orange',
 'Banana',
 'Mango',
 'Cherry'
]

remove(item){
  this.chips.splice(item, 1);
}

柱塞演示

Answer 2

看看这个[https://teradata.github.io/covalent/#/components/chips][Chips]

这个图书馆完美地赞美角质材料。