Получить свойство первого элемента в массиве, если существует

Question

В Angular 7 у меня есть модели:

export interface ProductModel {      
  files: FileModel[];
  name: string;     
}

export interface FileModel { 
  type: string;
  url: string;
}

В шаблоне, указанном для продукта, мне нужно отобразить URL первого файла, тип которого "image":

{{ product.files.find(x => x.type == 'image').url }} 

Но я получаю ошибку:

Bindings cannot contain assignments

Как это сделать?

Примечание

Я не уверен, product.files.find(x => x.type == 'image') возвращает какие-либопункт.

Answer 1

Неправильно использовать выражения в угловых привязках.Я бы предложил переместить ваше выражение в переменную:

myItem: string = this.productModel.files.find(x => x.type == 'image').url;

И ваш html:

{{ myItem }} 

Взгляните на эту демонстрацию StackBlitz.

Answer 2

В вашем коде:

getProd() {
     return product.files.find(x => x.type == 'image').url
    }

шаблон:

{{ getProd() }} 

Answer 3

Это действительно плохая идея сделать это в первую очередь.Каждый раз, когда запускается обнаружение изменений, этот поиск будет повторяться.Это снизит производительность вашей страницы и может даже стать непригодным для использования.Предпочтительным способом является присвоение значения свойству и привязка к нему вместо этого.

imageUrl : string;
findProd() {
  this.imageUrl =  product.files.find(x => x.type == 'image').url
}

и в шаблоне

{{ imageUrl }}