Angular 根据用户输入动态更改组件数组答案

【问题标题】：Angular Dynamically Change Component Array Based on Input from UserAngular 根据用户输入动态更改组件数组
【发布时间】：2018-08-02 05:12:06
【问题描述】：

我有一个简单的搜索功能here，用户可以在其中搜索课程。用户目前可以添加搜索词，例如data、probability 添加到称为 searchTerms 的组件属性中。

我在视图中使用*ngFor 循环遍历searchTerms，并希望用户能够通过单击术语旁边的✖ 来删除每个术语。我已经这样定义了removeTerm() 方法：

removeTerm(term: string){
      var index = this.searchTerms.indexOf('term');
      if (index !== -1) this.searchTerms.splice(index, 1);
      this.filterByTerms();
    }

如何将每个唯一查询绑定到其自己的卡片，以便在调用 removeTerm() 时，仅从 searchTerms 数组中删除该术语？我想ngModel 是执行双向数据绑定所必需的，可能类似于[(ngModel)]='term' (click)="removeTerm(term)"？

谢谢！

【问题讨论】：

标签： angular angular-ngmodel angular-template

【解决方案1】：

你可以像(click)="removeTerm(term, index)"这样传递你想要删除的卡片的索引

然后在你的控制器中

removeTerm(term: string){
  if (index !== -1) this.searchTerms.splice(index, 1);
  this.filterByTerms();
}

【讨论】：

【解决方案2】：

我已经编辑了您的代码，请在此处查看： https://stackblitz.com/edit/angular-course-filter-pipe-3mdtgu?file=src/app/app.component.ts

您只需要从术语中删除引号：

removeTerm(term: string){
      var index = this.searchTerms.indexOf(term);
      if (index !== -1) this.searchTerms.splice(index, 1);
      this.filterByTerms();
    }

并在调用 removeTerm 函数时添加术语：

<a style="color: indianred; display: inline-block; padding-left: 6px;" (click)="removeTerm(term)">✖</a>

【讨论】：