您可以在 Angular 绑定中使用 array.filter 吗？

Question

我的模板中有这一行：

<span>{{ data.things.find(r => { return r.id == 5 }).description }}</span>

当我运行这个时，我得到以下错误：

Parser Error: Bindings cannot contain assignments at column...

这是否意味着您不能在绑定中使用 array.find？

我知道我的对象有值，表达式在手表中计算 window。有什么建议吗？

编辑：虽然 this question 及其答案可以解决这个问题，但我不认为它们是重复的。该问题特定于过滤到较小的列表，也许是一条记录，而我的问题是每次都获得一条记录。 @Thierry-Templier 的回答在这方面看起来不错，我喜欢它使 html.

变得多么干净

Answer 1

如果您正在使用 angular 2.（您没有提到您正在使用的 angular 版本，并为两个版本添加了标签）：我不知道这是否是最好的方法，但这应该可行：

Angular-2

<span *ngFor="#thing of data.things">
    <span *ngIf="thing.id == 5">{{thing.description}}</span>
</span>

Angular -1 : 相同的逻辑，只是改变语法

Answer 2

您还可以实现自定义管道：

@Pipe({
  name: 'filterBy'
})
export class FilterPipe {
  transform(value: [], args: string[]) : any {
    let fieldName = args[0];
    let fieldValue = args[1];
    return value.filter((e) => {
      return (e[fieldName] == fieldValue);
    });
  }
}

并这样使用它：

@Component({
  selector: 'my-app',
  template: `
    <span>{{(data.thing | filterBy:'id':'5') | json}}</span>
  `,
  pipes: [ FilterPipe ]
})
export class AppComponent {
  constructor() {
    this.data = {
      thing: [
        {
          id: 4,
          description: 'desc1'
        },
        {
          id: 5,
          description: 'desc3'
        }
      ]
    }
  }
}

看到这个 plunkr：https://plnkr.co/edit/D2xSiF?p=preview。

您可以在 Angular 绑定中使用 array.filter 吗？

Can you use array.filter in an Angular binding?

javascript-databinding

angular