Можете ли вы использовать array.filter в привязке Angular?

У меня есть эта строка в моем шаблоне:

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

Когда я запустил это, я получаю следующую ошибку:

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

Означает ли это, что вы не можете использовать array.find из привязки?

Я знаю, что мои объекты имеют значения, и выражение оценивается в окне просмотра. Любые предложения?

Изменить: В то время как этот вопрос, и его ответ обойдет проблему, я не думаю, что они дубликаты. Этот вопрос специфичен для фильтрации в меньшем списке, возможно, в одной записи, где по мере того, как моя проблема получает каждую запись каждый раз. @Тьерри-Templier ответ выглядит хорошо в этом отношении, и мне нравится, насколько он чист, что делает html.

Ответы

Ответ 1

Вы также можете реализовать пользовательский канал:

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

Ответ 2

Если вы используете angular 2. (вы не упомянули версию angular, которую используете, и добавили теги для обеих версий): Я не знаю, лучший ли это, но это должно работать:

Angular -2

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

Angular -1: та же логика, просто измените синтаксис