为什么 Angular Material mat-h​​orizo​​ntal-stepper 和 mat-stepper, on following step, first (click) 不起作用？

Question

我的 (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')，即使是第一次。并且在第二次 step 内，第一次点击没有登录控制台。

这是什么原因，如何处理？

Answer 1

发现问题：

改变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