Angular 4 + Material Design - 可拆卸芯片答案

【问题标题】：Angular 4 + Material Design - removable chipsAngular 4 + Material Design - 可拆卸芯片
【发布时间】：2017-12-23 23:45:43
【问题描述】：

我需要像上面这样的可拆卸芯片：

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

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

现在我必须像这样将它绑定到 textarea：

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

【问题讨论】：

使用数组存储芯片的字符串，使用 ngfor 循环渲染它们，点击芯片的十字图标，将它们从数组中删除。

标签： angularjs angular material-design

【解决方案1】：

首先将font-awesome 导入您的项目或提供close 图标（我在示例中使用了font-awesome）。

然后你可以在芯片中添加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);
}

Plunker demo

【讨论】：

下面我粘贴我得到的截图。但我没有得到结果。
就像我说的，要么你必须使用本地assets > img文件夹中的图标，要么使用font-awesome，在你的index.html中添加这个链接：<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
我编辑了我的问题，因为我真的需要芯片功能的输入。可以是输入或文本区域。
创建一个新问题会更好，因为将 input/textarea 与 md-chip 绑定与使用可移动芯片完全不同。
stackoverflow.com/questions/45200931/… 我在这里创建了新问题。如果你知道怎么做，请告诉我。

【解决方案2】：

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

这个库完美地补充了角度材料。

【讨论】：