绑定到ngFor

Question

我有一个过滤器组件，它与包含我正在迭代的数据的视图完全分开。当我使用input元素引用将值传递给管道时，我可以在以下场景中使用过滤器管道：

<div class="card-subject">
  <input type="text" #filter (keyup)="0">
  <div *ngFor="let team of teams | filterData: filter.value">
    <h2>{{ team.name }}</h2>
    <h2>{{ team.num }}</h2>
  </div>
</div>

在上面的例子中，输入元素存在于组件内并且很简单。然而，我想要做的是将输入置于其自己的组件中，因为它将被重用于各种不同类型的卡。

<card-directory-search-bar></card-directory-search-bar>
<div class="card-subject">
  <div *ngFor="let team of teams | filterData: filter.value">
    <h2>{{ team.name }}</h2>
    <h2>{{ team.num }}</h2>
  </div>
</div>

我已经在卡片中订阅了一个observable，并且能够将输入的值输入到过滤器输入字段中。我无法弄清楚如何将这些值传递到管道中。

在组件内部，我将值存储在属性中，如下所示：

ngOnInit() {
  this.sub = this.search.getChangeEvent()
    .subscribe((value) => {
      this.value = value;
    }
  );
}

我无法弄清楚如何将值传递给管道。我试图在ngFor中绑定属性，如下所示，但它不起作用

<div *ngFor="let team of teams | filterData: {value}">

当我更新代码时，我得到以下错误：

<card-directory-search-bar></card-directory-search-bar>
<div class="card-subject">
  <div *ngFor="let team of teams | filterData: {value}">
    <h2>{{ team.name }}</h2>
    <h2>{{ team.num }}</h2>
  </div>
</div>

订阅效果很好：

如何将更新后的值输入管道？

谢谢，

Answer 1

您应该删除括号并使用管道参数，如下所示：

<div *ngFor="let team of teams | filterData: value">