如何更改角度中仅单个元素的颜色

由 发布于 angularangular-material
 收藏

我在列表中显示了按钮。当我单击它们时，我想更改它们的颜色。但是，当我单击它时，它将更改该列表中所有按钮的颜色。但是我只想更改单个按钮图标。

这是我的HTML

<li *ngFor="let datum of filteredData; let i = index">
        <button mat-mini-fab (click)="onLike(datum);onToggle()" [style.background-color]="toggle ? 'green' : 'red'">
            <mat-icon svgIcon="check" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
        </button>
</li>

这是我的逻辑

toggle=true;
onToggle() {
    this.toggle = !this.toggle;
  }

任何帮助，将不胜感激！

评论
婚礼礼堂
婚礼礼堂

这是正确的，因为您已经在ngFor中编写了代码， 尝试这样的事情。单击可添加和删除类，并在CSS中更改颜色。

toggle=true;
onToggle() {
    this.toggle = !this.toggle;
  }

 .red {color: red;}
  .green {color: green;}

<li *ngFor="let datum of filteredData; let i = index">
        <button mat-mini-fab (click)="onLike(datum);onToggle()" [ngClass]="toggle ? 'green' : 'red'">
            <mat-icon svgIcon="check" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
        </button>
</li>
点赞
评论
MS女人
MS女人

因此，您显然需要跟踪单击的按钮。并根据跟踪器的状态更改颜色。这很容易做到，

第1步：引入跟踪变量

public clicked: {[key: number]: boolean} = {};

步骤2：将onToggle函数更改为

public onToggle(i): void {
   // Switch between red and green.
   this.clicked[i] = !this.clicked[i];
}

要么

public onToggle(i): void {
   // always green
   this.clicked[i] = true;
}

步骤3：更改函数调用以传递唯一ID的预点击：

<li *ngFor="let datum of [1,2,3]; let i = index">
    <button (click)="onToggle(i)" 
            [style.background-color]="clicked[i] ? 'green' : 'red'">
            {{ i }}
     </button>
</li>
这段代码现在已经准备就绪！！！
点赞
评论