为什么 Angular Material mat-h​​orizo​​ntal-stepper 和 mat-stepper，在接下来的步骤中，首先点击不起作用？

如何解决为什么 Angular Material mat-h​​orizo​​ntal-stepper 和 mat-stepper，在接下来的步骤中，首先点击不起作用？

我的 (click) 事件有问题，在 Angular 代码中触发了第二次点击：

    <label class="selectLabel">Select floor tiles:</label>
    <div class="center row itemListedConainer scroller">
      <div *ngFor="let tile of getTilesFloorItems(); let i = index" class="itemListed col" 
      (click)="setTile()">
      </div>
    </div>

经过调试和多次试验后，我发现这与@angular/material/stepper有关，进入以下步骤后，第一个(click)不起作用。

我设法在这个 Stackblitz 中重现了这个问题：link

请注意，当您在第一个 step 内点击任何绿色图块时，您将获得 console.log('hit')，即使是第一次。并且在第 2 个 step 内，第一次点击不会登录控制台。

这是什么原因以及如何处理？

解决方法

发现问题：

改变getTilesFloorItems()模式；将您的 tiles 分配给一个字段并在 ngFor 中从那里读取它。否则，您将创建 2 组 tiles 实例。

export class QuestionsStepperComponent {
  public setTile(): void {
    console.log('hit');
  }

  tiles: any[] = [
    {
      type: 'tiles',...

<div *ngFor="let tile of tiles; ...

Fixed stackblitz