单击不捕获 y mat-button-toggle

Question

我的组件中有这个按钮工具：

<mat-button-toggle-group appearance="legacy">
  <mat-button-toggle *ngFor="let seance of tableauSeances!">
    <fa-icon icon="calendar-alt"></fa-icon>
    {{ seance.dateSeance!.format('dddd D MMMM YYYY') }}
    <fa-icon icon="check-circle" class="check" *ngIf="verifierSeanceExistante(seance)"
             (click)="onClickSeance(seance)"></fa-icon>
  </mat-button-toggle>
</mat-button-toggle-group>

一切正常（tableauSeances 包含我的对象、fa-icons 和我的日期正确显示，..）但是当我点击我的按钮时，什么都没有：功能“onClickSeance”没有到达。

如果我把函数调用放在mat-button-toogle元素中，也是一样的……

但是，如果我在 mat-button-toogle-group 组之外调用相同的函数，则会调用该函数

你知道为什么点击不被捕获吗？

编辑 1

看到Eliseo回归后代码改变

TS：

  clicSurUneSeance(event: MatButtonToggleChange): void {
    // eslint-disable-next-line no-console
    console.log(event.value);
  }

HTML：

<div class="container-fluid">
  <div *ngIf="saisonSelectionneeCalendrier && saisonSelectionneeCalendrier.id && this.verifierOptionActive()" class="row calendriers">
    <mat-button-toggle-group appearance="legacy">
      <mat-button-toggle *ngFor="let seance of tableauSeances!"
                         (change)="clicSurUneSeance($event)">
        <fa-icon icon="calendar-alt"></fa-icon>
        {{ seance.dateSeance!.format('dddd D MMMM YYYY') }}
        <fa-icon *ngIf="verifierSeanceExistante(seance)" class="check" icon="check-circle"></fa-icon>
      </mat-button-toggle>
    </mat-button-toggle-group>
  </div>
</div>

编辑 2

ngFor中使用的数组结构

    { seance: ISeance, 
selection: boolean, 
identifiant: string 
}[]

编辑 3

我尝试在同一个组件中不使用 ngFor。第一组不工作，但第二组是... ngFor 有错误？也许是错过了 ngFor 没有初始化并扰乱组的某些东西、属性或值？

 <mat-button-toggle-group multiple="true">
        <mat-button-toggle (change)="clicSurUneSeance($event)" *ngFor="let seancePossible of tableauSeancesPossibles!">
          <fa-icon class="calendar" icon="calendar-alt"></fa-icon>
          {{ seancePossible.seance.dateSeance!.format('dddd D MMMM YYYY') }}
          <fa-icon *ngIf="seancePossible.selection" class="check" icon="check-circle"></fa-icon>
        </mat-button-toggle>
      </mat-button-toggle-group>


      <mat-button-toggle-group multiple="true">
        <mat-button-toggle (change)="clicSurUneSeance($event)" [value]="tableauSeancesPossibles![0].seance">
          <fa-icon class="calendar" icon="calendar-alt"></fa-icon>
          {{ tableauSeancesPossibles![0].seance.dateSeance!.format('dddd D MMMM YYYY') }}
          <fa-icon *ngIf="tableauSeancesPossibles![0].selection!" class="check" icon="check-circle"></fa-icon>
        </mat-button-toggle>
        <mat-button-toggle (change)="clicSurUneSeance($event)" [value]="tableauSeancesPossibles![1].seance">
          <fa-icon class="calendar" icon="calendar-alt"></fa-icon>
          {{ tableauSeancesPossibles![1].seance.dateSeance!.format('dddd D MMMM YYYY') }}
          <fa-icon *ngIf="tableauSeancesPossibles![1].selection!" class="check" icon="check-circle"></fa-icon>
        </mat-button-toggle>
        <mat-button-toggle (change)="clicSurUneSeance($event)" [value]="tableauSeancesPossibles![2].seance">
          <fa-icon class="calendar" icon="calendar-alt"></fa-icon>
          {{ tableauSeancesPossibles![2].seance.dateSeance!.format('dddd D MMMM YYYY') }}
          <fa-icon *ngIf="tableauSeancesPossibles![2].selection!" class="check" icon="check-circle"></fa-icon>
        </mat-button-toggle>
        <mat-button-toggle (change)="clicSurUneSeance($event)" [value]="tableauSeancesPossibles![3].seance">
          <fa-icon class="calendar" icon="calendar-alt"></fa-icon>
          {{ tableauSeancesPossibles![3].seance.dateSeance!.format('dddd D MMMM YYYY') }}
          <fa-icon *ngIf="tableauSeancesPossibles![3].selection!" class="check" icon="check-circle"></fa-icon>
        </mat-button-toggle>
        <mat-button-toggle (change)="clicSurUneSeance($event)" [value]="tableauSeancesPossibles![4].seance">
          <fa-icon class="calendar" icon="calendar-alt"></fa-icon>
          {{ tableauSeancesPossibles![4].seance.dateSeance!.format('dddd D MMMM YYYY') }}
          <fa-icon *ngIf="tableauSeancesPossibles![4].selection!" class="check" icon="check-circle"></fa-icon>
        </mat-button-toggle>
      </mat-button-toggle-group>

Answer 1

见API

在文档中，您会看到 @Output()change: EventEmitter<MatButtonToggleChange> 属于 MatButtonToggleGroup

这是什么意思？你可以写一些像

<mat-button-toggle-group (change)="yourFunction($event)">
  ...
</mat-button>

查看(change) - 属性输出的名称 - 以及如何使用$event 传递参数 -$event 是 Angular 在 .html 中使用的保留字，并且始终在 .html 中使用

您的函数接收MatButtonToggleChange 类型的变量 - 请参阅定义中的相同类型是EventEmitter。如果您看到 MatButtonToogleChange 类，您会看到这是一个具有属性“值”的对象，因此您可以使用

  yourFunction(event: MatButtonToggleChange)
  {
    console.log(event.value)
  }

注意。如果您唯一需要的是为变量赋值，您可以采用另一种方法，即使用 [(ngModel)] 的方式

<mat-button-toggle-group [(ngModel)]="myvariable">
  ...
</mat-button>

{{myvariable}}

或者在 ReactiveForms 中使用

更新但是（总是有一个但是）..你需要给工具按钮“价值”

<mat-button-toggle-group (change)="yourFunction($event)">
    <mat-button-toggle *ngFor="let seance of tableauSeances!"
            <!--see the "value"-->
            [value]="seance">
       <fa-icon icon="calendar-alt"></fa-icon>
       {{ seance.dateSeance!.format('dddd D MMMM YYYY') }}
       <fa-icon *ngIf="verifierSeanceExistante(seance)" 
           icon="check-circle" class="check"></fa-icon>
   </mat-button-toggle>
</mat-button-toggle-group>