Question

单击时我已更改图标按钮的颜色，当我单击图标按钮时，默认图标按钮的颜色为原色，应将原色更改为红色。对我来说工作正常，现在单击隐藏的按钮后，将显示一个是“取消”按钮，另一个是“保存”按钮，直到现在为止，它工作正常，当我单击“取消”按钮时，红色的按钮应更改为主按钮，但取消按钮正在关闭并且图标按钮的颜色没有改变

<kendo-grid-command-column headerClass="data-list-header-cell" title="Delete" width="5" filterable="false">
    <ng-template kendoGridCellTemplate let-site>
      <button mat-icon-button color="primary" (click)="onDelete(data)" [ngClass]="{'selectedRemoveButton':data.isClicked}">
        <mat-icon>remove_circle</mat-icon>
      </button>
      
      // these are icon button if clicked on this button it will change color and also show 2 buttons cancel and save.
      
      <ng-container *ngIf="showButtons">
    <span class="rightButtons">
      <button class="mat-button menu-button" (click)="cancel()">
        <mat-icon>block</mat-icon> CANCEL
      </button>
      <button class="mat-button primary-button" (click)=" save()">
        SAVE
      </button>
    </span>
  </ng-container>

.selectedRemoveButton {
  color: red
}

 onDelete(data: any) {
    if (data.isClicked) {
      this.dataList.push(data);
    }
    data.isClicked = !data.isClicked;
    this.showButtons = !this.showButtons;
    console.log(data.Id);
  }
  
  //these is where i am first clicking on button when i click on these button color will change to red
  
  cancel(): void {
    this.showButtons = false;
  }
  //if presse on cancel button is disappearing but color have to change red to primary
  save() {
   
      this.Service.datalist(data.Id).subscribe(
          data => {
            this.dataList = data;
            console.log(data);
          });
    
  }
  //this is save button

请帮助我

Answer 1

使用ngClass动态添加类。

<button class="mat-button menu-button" [ngClass]="removeStyles" (click)="cancel()">

removeStyles = "";
cancel(): void {
  this.showButtons = false;
  this.removeStyles= "selectedRemoveButton"
}

Answer 2

如果没有得到该更改，是因为您错过了那里的东西。像这样，尝试在单击按钮时添加一个变量。

[ngClass]="changBtnColor ? classNameColorActual : classNameColorAfterClick" (click)="changeColor()"
.classNameColorActual{ color:red} 
.classNameColorAfterClick{color:blue}

该功能

changeColor(): void {
     this.changBtnColor = !this.changBtnColor ;     // this should change the color of the 
                                     // button every time is clicked
  }

您应该使用自定义类为样式提供样式，但是如果您不希望使用它们，则还应该使用元素的本机类来实现此目的，然后转到chrome中的开发工具并搜索该类。希望对您有所帮助。

如何更改点击时的按钮颜色？

2 个答案: