ngFor 问题中的 ngClass 函数

Question

这是一个非常简单的ngForloop。

html：

<div class="button" *ngFor="let button of buttons">
<button [ngClass]="{\'red\': testColor(button.id)}"
                (click)="changeColor(button.id)">
        test {{button.id}} - {{button.color}}
</button>
</div>

JS：

testColor(id){
  for(let i=0; i<this.buttons.length; i++){
    if(id == i){
        console.log('test1');
                return this.buttons[i].color;
      break;
    }

  }
}
changeColor(id){
    for(let i=0; i<this.buttons.length; i++){
    if(id == i){
        console.log('test2');
                this.buttons[i].color = !this.buttons[i].color;
      break;
    }

  }
}

见jsfiddle

当我点击按钮时，“test2”工作正常（它只被调用了 1 次），但“test1”（来自ngClass 中的函数）被调用了 5 次，即使使用了断路器。

我猜这是由于ngClass，但我怎样才能让它只被点击的元素调用？

Answer 1

每次 Angular 运行变更检测时都会调用视图绑定中的函数，因此通常被认为是个坏主意。

首选方法是将函数调用的结果分配给一个字段并绑定到该字段。 如果您使用*ngFor，您通常需要一个包含值数组的字段。

使用绑定到它

<div class="button" *ngFor="let button of buttons; index as i">
<button [ngClass]="{'red': testColors[i]"
                (click)="changeColor(button.id)">
        test {{button.id}} - {{button.color}}
</button>
</div>

Answer 2

这是因为你的控制台在for中，所以中断按预期工作，如果你点击第一个按钮，它会在一次迭代后停止，但如果你点击第五个，它会在第五个之后中断。

反正for没用，你可以这样做：

testColor(id){
  return this.buttons[id].color;
}
changeColor(id){
  this.buttons[id].color = !this.buttons[id].color;
}

你甚至可以跳过 testColor：

<button [class.red]="button.color" (click)="changeColor(button.id)"> 
    test {{button.id}} - {{button.color}}
</button>