angularjs - 绑定(bind)到 ngFor 中的组件属性

Question

我有一个过滤器组件，它与包含我正在迭代的数据的 View 完全分离。当我使用输入元素引用将值传递到管道时，我可以使过滤器管道在以下情况下工作:

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

我已经订阅了卡片中的一个可观察对象，并且能够获取输入到过滤器输入字段中的值。我不知道如何将这些值传递到管道中。

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

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

我不知道如何将值传递到管道中。我尝试如下绑定(bind) 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">