基于用户输入的角度动态更改组件数组

时间:2018-08-02 05:12:07

标签: angular angular-ngmodel angular-template

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

我在视图中使用searchTerms遍历*ngFor,希望用户能够通过单击该词旁边的来删除每个词。我已经这样定义了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)"这样?

谢谢!

2 个答案:

答案 0 :(得分:2)

您可以像这样(click)="removeTerm(term, index)"

传递要删除的卡的索引

然后在您的控制器中

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

答案 1 :(得分:0)

我已经编辑了您的代码,请在此处检查: 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>