角度单击按钮会突出显示另一个按钮，因为我正在更改数组中的值为什么？

如何解决角度单击按钮会突出显示另一个按钮，因为我正在更改数组中的值为什么？

因此，我试图使用Angular创建一个网站，并且遇到了一个非常特殊的错误。 基本上，我有一个* ngFor div，可以创建12个按钮。

<div *ngFor = "let color of colors; let i = index" style = "display: inline;">
  <button (click) = "toggleTrue(i)" id = "{{i}}" class = "coloredButton">
  </button>
</div>

单击按钮后，它应突出显示该按钮，然后像这样在我的组件中更改数组中的值。

toggleTrue(id: number){
    this.colors[id] = !this.colors[id];
    var button = document.getElementById(id.toString());
    if(this.colors[id] === true){
      button.style.border = "10px";
      button.style.borderColor = "white";
      button.style.borderStyle = "solid";
    }
    else{
      button.style.borderStyle = "none";
    }
}

但是由于某种原因，每当我单击一个按钮时，它都会高亮显示它旁边的按钮，如果我单击两次超过它，则由于某种原因它会高亮两个按钮而又突出显示一个按钮，请再次单击两次，它会高亮显示一个按钮三个按钮，等等。它没有突出显示右键，但是它传递给该函数的id是正确的，我使用console.log（id）进行了检查。

我已经弄乱了一些（取出类，行和其他内容），并将问题隔离到这行。

this.colors[id] = !this.colors[id];

如果我删除了它，那么一切都可以正常工作（当然，除了我不能再编辑数组的值了）。当我删除按钮的单击功能并且按钮的默认突出显示正确突出显示右侧按钮时，这一点得到了进一步证明。 谁能帮我一下，告诉我为什么突出显示不正确？任何帮助，将不胜感激。 如果您好奇，我会在组件中使用colors = []创建数组，这是我使用基本的for循环在构造函数中填充的布尔数组。

解决方法

您可以对代码进行一些更改。 HTML中的冷杉：

<button *ngFor="let color of colors; let i = index" (click) = "toggleTrue(i)" class = "coloredButton" [class.active]="color"> {{i}} < /button>

您注意到了[class.active] =“ color”这句话，验证color是否为true，按钮将具有活动类

.active {
  border: 10px solid white;
} 

我不知道如何生成颜色数组，但我假设了一些事情，并且还在类组件中更改了函数

colors = new Array(10).fill(false);

toggleTrue(index: number) {
  this.colors[index] = !this.colors[index]
}

,

https://codesandbox.io/s/crimson-brook-wn3q0?file=/src/app/app.component.html

这是一个带有解决方案的沙盒。 本质上，您想通过使用NgClass或NgStyle来保持模板样式 并仅将组件用于更改状态，避免由于生命周期问题直接访问DOM。

打字稿

export class AppComponent {
  colors: boolean[];

  constructor() {
    this.colors = [];
    for (let i = 0; i < 10; i++) {
      this.colors.push(false);
    }
  }

  toggleTrue(id: number) {
    this.colors[id] = !this.colors[id];
  }
}

HTML

<div>
  <div *ngFor="let color of colors; index as i">
    <button
      (click)="toggleTrue($event,i)"
      id="{{i}}"
      [ngClass]="{'active':colors[i]==true}"
    >
      button
    </button>
  </div>
</div>

CSS

.active {
  color: red;
}

.inactive {
  color: blue;
}