将变量保存在 ngFor 循环中，结果从项目中取出

Question

我很好奇，在*ngFor 循环中保存一个变量的正确方法是什么，导致一个项目，因为出于效率原因，我不想多次调用一个函数

我正在尝试做的示例：

<div *ngFor="let item of items; let i = index; let value = getValue(item)" [ngClass]="{'alert':!value}">
  <div *ngIf="!value">
    alert
  </div>
  {{item}}
</div>

我试图避免的例子：

<div *ngFor="let item of items; let i = index;" [ngClass]="{'alert':!getValue(item)}">
  <div *ngIf="!getValue(item)">
    alert
  </div>
  {{item}}
</div>

Answer 1

将您的items 放入map 函数中，并为每个项目返回正确的值。

function valueize(items: any[]): any[] {
    return items.map(item => {
        name: item.name,
        description: item.description,
        // etc...
    };
}

<div *ngFor="let item of valueize(items); let i = index;" [ngClass]="{'alert':!item}">
  <div *ngIf="!item">
    alert
  </div>
  {{item}}
</div>

您可能希望在调用 *ngFor 之前执行此操作，因此您可以执行 *ngFor="let item of items" ，其中 items 中的每个 item 已经是正确的值。例如，您可以在构造函数或 ngOnInit 中执行此操作。

编辑：

正如 ChrisG 所提到的，如果您已经拥有 getValue 函数，则可以通过执行以下操作来使其更简洁：

<div *ngFor="let item of items.map(getValue); let i = index;" [ngClass]="{'alert':!item}">
  <div *ngIf="!item">
    alert
  </div>
  {{item}}
</div>

这样您不必创建一个全新的函数来映射，您只需映射内联并为每个项目调用适配器函数，从而为每个item 赋予正确的值。

Answer 2

没有办法做你想做的事。

您唯一能做的就是创建一个数组，将值存储在数组中，然后使用索引获取它们。有点像...

let data = [];
.
.
.
<div *ngFor="let item of items; let i = index" ngClass="{'alert':!data[i]}">
{{ data[i] = getValue(item) }}
  <div *ngIf="!data[i]">
    alert
  </div>
  item
</div>

并且仍然不确定它是否会起作用，Angular 不适合这种东西，在将它们推送到循环之前简单地解析你的值要容易得多，比如 ...

<div *ngFor="let value of getItemValues(items); let i = index" [ngClass]="{'alert':!value}">
  <div *ngIf="!value">
    alert
  </div>
  {{value}}
</div>

getItemValues() 将一次性解析所有值。