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"执行item中的每个items已经是正确的值。您可以在构造函数中执行此操作，例如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()将一次解析所有值。

在ngFor循环中保存变量，这是由项目产生的

2 个答案: