Question

我从这篇帖子Adding the active class to each clicked button, Angular 4获得了此代码我想要做的是与该帖子中提到的相同的事情，单击它时使按钮处于活动状态，并使组中的其他按钮处于非活动状态。复制相同的代码，由于某种原因它不起作用

<button mat-button *ngFor="let button of filterButtons" [ngClass]="{'active': button.isClicked}" (click)="button.isClicked = !button.isClicked">
    {{ button.text }}
</button>

Component.ts

  filterButtons = [
    { text: 'Posted', isClicked: false },
    { text: 'FFM', isClicked: false },
    { text: '9999', isClicked: false },
    { text: '9000', isClicked: false },
    { text: '8555', isClicked: false },
    { text: 'Canceled', isClicked: false },
  ]

Answer 1

问题是当您单击其他按钮时，您没有重置isClicked值。

最简单的解决方案是这样的。

app.component.html

<button mat-button *ngFor="let button of filterButtons" [ngClass]="{'active': button.isClicked}" (click)="setActive(button)">
    {{ button.text }}
</button>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    filterButtons = [
    { text: 'Posted', isClicked: false },
    { text: 'FFM', isClicked: false },
    { text: '9999', isClicked: false },
  ]


  setActive(button: any): void {
    for(let but of this.filterButtons) {
      but.isClicked = false;
    }

    button.isClicked = true;
  }
}

您可以找到其他解决方案，例如this post

中所述

Angular - 单击时按钮处于活动状态，单击组中的其他按钮时处于非活动状态

1 个答案: