Question

这是一个非常简单的ngFor loop。

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

这是因为你的控制台在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>

Answer 2

每次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>

ngFor问题内的ngClass函数

2 个答案: