Angular - сделать кнопку активной, когда она нажата, и неактивной, когда нажата другая кнопка в группе. - PullRequest
Новая
       28

Angular - сделать кнопку активной, когда она нажата, и неактивной, когда нажата другая кнопка в группе.

0 голосов
/ 10 июня 2018

Я получил этот код из этого поста Добавление активного класса к каждой нажатой кнопке, 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 },
  ]

1 Ответ

0 голосов
/ 11 июня 2018

Проблема в том, что вы не сбрасываете значение 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;
  }
}

Вы можете найти другие решения, как описано в этом посте

...