為什么 Angular Material mat-horizontal-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') ，即使是第一次。 並且在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; ...

固定堆棧閃電戰