Select 多个按钮使用 angular

Question

<div *ngFor="let value of values">`
 <button>{{value}}</button>`
</div>

单击时我需要更改所选按钮的背景颜色。

Answer 1

为点击事件创建一个带有 HostListener 的指令
注入 ElementRef & Renderer2
在主机侦听器方法中，调用 renderer2.addClass(this.elemenentRef, 'class-with-color-for-button')

Answer 2

这只是另一种方式，但创建指令是合适的方式，如 Alexander answer

<div *ngFor="let value of values">
    <button #btn (click)="btn.classList.add('selected')">{{value}}</button>
</div>

如果您想切换 class，请使用 toggle 而不是 add

    <button #btn (click)="btn.classList.add('selected')">{{value}}</button>

demo

Answer 3

<mat-button-toggle-group multiple="true" appearance="legacy" name="fontStyle" aria-label="Font Style">
    <mat-button-toggle value="bold">Bold</mat-button-toggle>
    <mat-button-toggle value="italic">Italic</mat-button-toggle>
    <mat-button-toggle value="underline">Underline</mat-button-toggle>
  </mat-button-toggle-group>

使用

multiple="true"

多 select 选项

演示 URL : Demo here

Answer 4

例如，如果您想打印日期并添加切换功能，您的 html 应该是

<div *ngFor="let day of weekDays; let i = index" style="display: inline-block;">
                                <button mat-mini-fab [color]="day.status ? 'primary' : ''" 
                                 (click)="ChangeWeekDayStatus(i)">
                                 {{day.text}}</button> &nbsp;</div>
                                                             </div>

并且您的 .ts 应该包含一个数组

 weekDays: Week_Day[] = [
      {
        text: "MO",
        status: false
      }, {
        text: "TU",
        status: true
      }, {
        text: "WE",
        status: false
      }, {
        text: "TH",
        status: false
      }, {
        text: "FR",
        status: false
      }, {
        text: "SA",
        status: false
      }, {
        text: "SU",
        status: false
      }
    ];

和一个处理切换的函数

 ChangeWeekDayStatus(index:number){
    this.weekDays[index].status=!this.weekDays[index].status;
  }

Select 多个按钮使用 angular

Select Multiple Buttons using angular

background

colors

button

angular

angular9