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

Question

我有一个简单的搜索功能 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)"？

谢谢！

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>

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

Angular Dynamically Change Component Array Based on Input from User

angular

angular-ngmodel

angular-template