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

Question

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

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

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

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

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

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

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

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

Answer 2

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

Угловая -2

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

Угловая -1: Та же логика, просто изменить синтаксис