Причина ExpressionChangedAfterItHasBeenCheckedError «Выражение изменилось после его проверки»

Question

Я проверил некоторые документы, но не смог понять причину этой ошибки в моей ситуации.Хотя это выглядит великолепной статьей: https://blog.angular -university.io / angular-debugging / , я не мог понять.

Позвольте мне привести мои данные о коде.

.html

<mat-tab-group>


    <mat-tab label="My Cards">
      <div class="cardList">
        <ng-container *ngFor="let card of myCards; let i=index">
          <app-card [cardItem]="card" 
                     class="cardListItem"></app-card>
        </ng-container>
      </div>
    </mat-tab>

    <mat-tab label="Winning Cards">
      <div class="cardList">
        <ng-container *ngFor="let winningCard of winningCards; let i=index">
          <app-card [cardItem]="winningCard" 
                     class="cardListItem"></app-card>
        </ng-container>
      </div>
    </mat-tab>

</mat-tab-group>

Для приведенных ниже кодов somefunction() вызывается из ngOnInit() и this.myCards перед использованием заполнен

.ts (ФОРМАТ 1)

//fill myCards and winningCards

somefunction
{  ..........
   this.winningCards= [...this.myCards];
}

получена ошибка «Выражение изменилось после проверки»

.ts (FORMAT 2)

//fill myCards and winningCards

somefunction
{   ..........
    const myClonedArray: CardModel[] = Object.assign([], this.myCards);
    this.winningCards = myClonedArray;
}

получено сообщение об ошибке «Выражение изменилось после проверки»

.ts (FORMAT 3)

//fill myCards and winningCards
somefunction
{       ..........
        this.winningCards = JSON.parse(JSON.stringify(this.myCards));
}

Я НЕ ПОЛУЧАЮ ОШИБКИ, РАБОТАЮЩЕЙ В ШТРАКЕ

, поэтому, если учесть этот код, почему эта ошибка произошла, когда я использовал [...this.myCards]; или Object.assign([], this.myCards);, и не произошла, пока яиспользовал this.winningCards = JSON.parse(JSON.stringify(this.usedCards));