3

テンプレートに次の行があります。

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

これを実行すると、次のエラーが表示されます。

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

array.findこれは、バインディング内から使用できないことを意味しますか?

オブジェクトに値があり、ウォッチ ウィンドウで式が評価されることはわかっています。助言がありますか？

編集:この質問とその回答は問題を回避しますが、重複しているとは思いません。その質問は、小さなリスト、おそらく 1 つのレコードへのフィルタリングに固有のものです。ここで、私の問題は毎回 1 つのレコードを取得することです。@ Thierry-Templier の回答はこの点で見栄えがよく、HTML がいかにきれいになるかが気に入っています。

4

2 に答える 2

6

カスタム パイプを実装することもできます。

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

于 2016-03-14T11:58:44.683 に答える
1

angular 2を使用している場合（使用している角度バージョンについて言及せず、両方のバージョンのタグを追加しました）：それが最善の方法かどうかはわかりませんが、これはうまくいくはずです：

角度 -2

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

Angular -1 : 同じロジックで、構文を変更するだけです

于 2016-03-14T11:23:09.020 に答える