Fatal编程技术网
  • angular/
  • Angular 避免在角度模板中调用多个函数

Angular 避免在角度模板中调用多个函数

angular typescript

Angular 避免在角度模板中调用多个函数,angular,typescript,Angular,Typescript,我有以下代码 <div *ngFor="let item of items"> <button [disabled]="doSomething(item)"></button> <input [someProperty]="doSomething(item)"></div> <div [ngClass]="{ 'cla

我有以下代码

<div *ngFor="let item of items">
    <button [disabled]="doSomething(item)"></button>
    <input [someProperty]="doSomething(item)"></div>
    <div [ngClass]="{
          'class1': item.attr == 'val1' || doSomething(item),
          'class2': row.attr != 'val2' && !doSomething(item)
        }"
></div>
我觉得每次重新计算模板中每个项目的
doSomething
值时都不是一个好做法

有更推荐的方法吗？

有两种方法，其中一种是模板“hack”：
另一种方法是，在获取每个
项时，向每个
对象添加一个属性，并读取该属性。
如果有大量项，可以通过计算布尔逻辑来节省时间，然后将其保存在一个列表中，并在其中循环。
考虑添加一个示例

doSomething(item) {
    return someBooleanLogic(item);
}



<div *ngFor="let item of items">
  <ng-container *ngIf="{ something: doSomething(item) } as data">
    <button [disabled]="data.something"></button>
    <input [someProperty]="data.something"></div>
    <div [ngClass]="{
          'class1': item.attr == 'val1' || data.something,
          'class2': row.attr != 'val2' && !data.something
        }"></div>
  </ng-container>
</div>