Question

我需要如上所述的可移动芯片：

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中的示例？

Answer 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

Answer 2

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

这个库非常适合角度材料。

Angular 4 +材料设计 - 可拆卸芯片

2 个答案: