angularjs - Angular 4 + Material Design - 可移除芯片

Question

我需要像上面那样的可拆卸芯片:

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

但我必须在 Angular 4 中编写它。我如何重做这些芯片 https://material.angular.io/components/chips/overview可移动？

现在我必须像这样将它绑定(bind)到文本区域:

<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 中的示例那样绑定(bind)这些芯片？

Answer 1

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

然后可以在芯片中添加icon，并为其添加click事件。单击关闭 图标时，传递它的索引并将其从原点移除。

示例 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>  

组件.ts:

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

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

Plunker demo