如何使用Angular 11在ngFor中设置临时变量？

我有以下html调用这些方法：

getMetaForXXX

方法在

ngFor

块中多次调用。我觉得这不是一个好的做法，我希望有一种方法可以简化这个逻辑

{{getMetaForVendor（i.vendor.display}}
{{i.name}
{i.发布| monthYear}&mdash；{{i.expiration | monthYear}}
凭证ID:{i.Credential | |“不适用”}
{{getMetaForLevel（i.level）.display}

component.html

状态：CertificationState；
getMetaForLevel（值：字符串）：元数据{
返回this.state.meta.levels.find（meta=>meta.name==value）；
}
getMetaForVendor（值：字符串）：元数据{
返回this.state.meta.vendors.find（meta=>meta.name==value）；
}

组件技术

导出接口认证状态{
数据：认证[]；
元：认证元；
}
出口接口认证{
id：编号；
凭证：字符串；
描述：字符串；
有效期：每月；
已印发：每月；
级别：字符串，
名称：字符串；
供应商：字符串；
}
导出接口认证元数据{
级别：元数据[]；
供应商：元数据[]；
}
导出接口元数据{
名称：字符串；
显示：字符串；
描述：字符串；
职级：人数；
}

model.ts

{
“数据”：[
{
“id”：“1”，
“名称”：“云从业者”，
“凭证”：“1234”，
“描述”：“Lorem ipsum dolor sit amet.”，
“到期日”：{
“月”：7，
“年份”：2023年
},
“已发布”：{
“月”：12，
“年份”：2018年
},
“级别”：“基础”，您应该在此处创建管道：-

@Pipe({name: 'displayVal'})
export class DisplayValuePipe implements PipeTransform {
  transform(val, state): string {
     return state.meta.levels.find(meta => meta.name === value.vendor)?.display;
  }
}

然后像这样使用它：-

<span class="large">{{i | displayVal: state}}</span>

{{i|displayVal:state}
创建模板变量的一种方法是使用
*ngIf
。在下面的代码中，该指令应用于
*ngFor
循环中的
div
元素：


为确保
*ngIf
条件为真，将创建并计算一个对象
表达式返回的值被指定给对象的属性
对象被分配给一个新的模板变量，
metaForLevel
然后可以在循环迭代中多次使用该变量


...
{{metaForLevel.data.display}

如果
*ngFor
循环中不存在HTML容器或不需要HTML容器，则可以将
*ngIf
条件应用于
ng容器
元素。
Hmmm。但这仍然会执行多次？我还需要整个元数据对象，因为我正在读取多个字段，而不仅仅是显示字段。我正在其他HTML文件中执行类似的模式。每行一次。如果我需要元数据模型中的显示和排名属性，则此方法将每行调用两次，即使返回的元数据对象包含所有数据。仅在开发模式下每行两次。为什么仅在开发模式下？每次更改都将调用模板中的函数调用检测周期，通常是一种不好的做法。这是一个非常好的问题（我建议不要投票关闭）这种方法可以在同一条件下使用多个值，还是我必须嵌套？这种方法也可以使用管道而不是方法吗？每个
*ngIf
都可以创建一个模板变量。因此，对于多个变量，您必须嵌套多个
ng容器
元素。我非常确定您可以在
*ngIf中使用管道
expression。您仍在调用
getMetaForLevel（i.level）
来自模板的函数。这将被多次不必要地调用，即在每张CD上调用cycle@Drenai-我的答案是关于在
*ngFor
循环中创建一个临时变量。分配给变量的值可能是函数调用或任何其他有效表达式的结果。我让每个开发人员来确定他们使用的表达方式适合他们的具体情况。