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

Question

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

angularjsangularmaterial-design

3

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

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

但是我必须使用Angular 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中的示例一样绑定这些芯片？

- user

1

使用数组来存储芯片的字符串，通过ngfor循环渲染它们，在单击芯片的交叉图标时，从数组中删除它们。 - Ploppy

2个回答

-1

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

这个库完美地补充了Angular Material。

- remeez

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nehal · Accepted Answer

首先将font-awesome导入到您的项目中，或使用可用的关闭图标（我在示例中使用了font-awesome）。

然后，您可以在芯片中添加图标并为其添加单击事件。当单击关闭图标时，传递其索引并从原位置删除它。

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