Angular - 单击按钮后更改表中行的背景颜色

Question

I want change the background color of the button from green to blue of selected row after click the button I tried but change the color of all rows. This is a similar code.

html

 <td width="15%" class="text-center">
          <button [disabled]="!date.programStatus"
          [ngClass]="{'btn-success': date.programStatus, 'btn-rose': !date.programStatus, 'blueColor': isBlue }"
          class="btn btn-square mat-raised-button smallBtn" mat-raised-button=""
          
            (click)="getProgramPerTermId(date.programPerTermId); getProgramDetails(date) ; setNewApplication()">
            <span class="material-icons">done</span>
            <div class="mat-button-ripple mat-ripple" matripple=""></div>
          </button>

        </td>

ts

      this.programDetails = ppTermDetails;
      console.log("Program Details ID >>>",this.programDetails.programPerTermId);
  
        if (sessionStorage.getItem('programs') === null) {
         var programs = [];
        } else {
          programs = JSON.parse(sessionStorage.getItem('programs'));
        }
        const stringified = JSON.stringify(this.programDetails);
        if (!programs.includes(stringified)) {
          programs.push(stringified);
          showNotification('top', 'right', 'success', 'Sucessfully added in the wishlist!');
          this.isBlue = !this.isBlue;
          // I want the button color will change here, if this statement is true.

        } else {
          showNotification('top', 'right', 'danger', 'Already exists in the wishlist!');
        }
        sessionStorage.setItem('programs', JSON.stringify(programs));
        }

我在这里要做的是：-我有一个程序列表，当我单击与特定程序相对应的按钮时，该程序将存储在我的 session 存储中。 不，我想如果程序详细信息存储在 session 存储中，那么我的按钮颜色也应该从绿色变为蓝色，这样我就知道了。 此程序详细信息已存储在 session 存储中。

请打开链接看图，让大家了解我目前说的是哪个按钮，我想把哪个按钮的颜色从绿色变成蓝色！

每次点击时，所选程序的按钮都会从绿色变为蓝色。

Answer 1

您正在使用 / 并为所有行全局更改字段。 当然它会改变所有行的颜色。

有多种方法可以解决这个问题。 恕我直言，最好的方法是创建一个实现此功能的指令并将其应用于您的 td 或 tr。 这样你就有多个指令实例，因此每个行/单元格都有一个单独的 state （无论你的要求是什么）

简单的解决方案是为isBlue使用数组并使用行索引（或 object 并使用数据的某些唯一键作为索引）为每一行单独设置标志。