Question

我有一个简单的搜索功能here，用户可以在其中搜索课程。用户目前可以添加搜索字词，例如data，probability被添加到称为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)"这样？

谢谢！

Answer 1

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

传递要删除的卡的索引

然后在您的控制器中

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

Answer 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>

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

2 个答案: