获取数组中第一项的属性（如果存在）

Question

在Angular 7上，我有以下模型：

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

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

在给定产品的模板上，我需要显示第一个文件类型为“ image”的网址：

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

但是我得到了错误：

Bindings cannot contain assignments

该怎么做？

注意

我不确定product.files.find(x => x.type == 'image')是否返回任何项目。

Answer 1

在Angular绑定中使用表达式是不好的做法。我建议将您的表达式移到变量中：

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

还有您的html：

{{ myItem }} 

看看this StackBlitz演示。

Answer 2

首先要这样做确实是一个坏主意。每次运行更改检测时，都会重新执行此find调用。这将降低页面的性能，甚至可能变得无法使用。首选方法是为属性分配值，然后绑定到该属性。

{{ imageUrl }} 

和在模板中

Retry-After

Answer 3

在您的代码中：

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

模板：

{{ getProd() }}