Question

我想改变我点击的按钮的背景颜色，下面是我的代码，但是，它没有像我预期的那样运行，而是改变了所有的行按钮。有什么帮助吗？

<tr *ngFor="let stageitem of stageListData">
        <td>{{stageitem.srcScriptInstanceName}}</td>
        <td>{{stageitem.startTime}}</td>
        <td>{{stageitem.endTime}}</td>
        <td>Manual</td>
        <td>{{stageitem.state}}</td>
        <td><button class="erroDisplayBtn" [ngStyle]="{'background-color':btnColor}" (click)="errorStepMenuOpen($event, stageitem)">{{stageitem.error}}</button></td>
</tr>

Angular 2脚本

 errorStepMenuOpen() {
    this.errorStepMenu = true;
    this.btnColor = "#ff7300";
 }

Answer 1

快速解决方法不是只有一个btnColor，而是可以拥有btnColors数组。

在填充stageListData时，您可以遍历stageListData，然后为每个stageItem，将默认颜色推送到btnColors。

在您的模板中，进行以下更改：

<tr *ngFor="let stageitem of stageListData; let i = index;">
     <td>{{stageitem.srcScriptInstanceName}}</td>
     <td>{{stageitem.startTime}}</td>
     <td>{{stageitem.endTime}}</td>
     <td>Manual</td>
     <td>{{stageitem.state}}</td>
     <td><button class="erroDisplayBtn" [ngStyle]="{'background-color':btnColor[i]}" (click)="errorStepMenuOpen($event, stageitem, i)">{{stageitem.error}}</button></td>
</tr>

在你的ts：

errorStepMenuOpen(event, stageItem, index) {
    this.errorStepMenu = true;
    this.btnColors[index] = "#ff7300";
}

Answer 2

在经历同样的挑战时，我偶然发现了您的问题，但在我的情况下，我试图点击svg图标所在的表格行后更改其颜色。这是我解决我问题的方法。

 <tr *ngFor="let item of someList; let i = index" (click)="changeColor(i, item)">
                                    
        <span [style.background-color]="item.name !== selectedName ? 'red' : 'blue'">
            <i-check-square>
        </span>
</tr>

然后在我的ts文件上：

 selectedName:any;

 ngOnInit() {
        this.selectedName = null;
    }
changColor(i, item) {
        if ((this.selectedName = item.supplierName)) {
            return true;
        }
    }

ng更改我在角度2中单击的项目的bgcolor

2 个答案: