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

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 中重现了这个问题：链接

请注意，当您第一次点击任何绿色瓷砖时step，您将获得console.log('hit')，即使是第一次。并且在 2nd 内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; ...

固定堆栈闪电战