ExpressionChangedAfterItHasBeenCheckedError：角度

Question

我正在構建一個包含選項卡的頁面-這些選項卡是數據庫中的動態信息，但為簡單起見，我手動對其進行了定義。

每個選項卡都有一個相同的單選按鈕（還有一個保存按鈕，還有更多但為了簡單起見，我將其刪除了）。

當我選擇一個單選按鈕時，出現此錯誤

ExpressionChangedAfterItHasBeenCheckedError：表達式在檢查后已更改。 先前值：“ ui-state-active：false”。 當前值：“ ui-state-active：true”。
在viewDebugError（core.js：9817）

同樣在再次單擊它之后沒有錯誤

基本上，問題是如何在動態標簽內創建單選按鈕。

我讀了這個： https : //blog.angular-university.io/angular-debugging/

和這個： https ： //blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasenen被檢查過error-error-e3fd9ce7dbb4

但是由於我是Angular的新手，所以我不明白如何解決問題。

這是完整的代碼

  <p-tabView>
  <p-tabPanel [header]="category" *ngFor="let category of categoriesList; let i = index" [selected]="i == 0">
    <br>

    <div class="ui-grid-row">
      <h3>Service experience for {{category}}</h3>
    </div>
    <div class="ui-grid-row">
      <div class="ui-g-6">
        <div class="ui-g-12">
          <p-radioButton name="quickFeedBackGrade" value="1" label="Very poor"
                     [(ngModel)]="categoryGrade" ></p-radioButton>
        </div>
        <div class="ui-g-12">
          <p-radioButton name="quickFeedBackGrade" value="2" label="Poor"
          [(ngModel)]="categoryGrade" ></p-radioButton>
        </div>
        <div class="ui-g-12">
          <p-radioButton name="quickFeedBackGrade" value="3" label="Good"
          [(ngModel)]="categoryGrade" ></p-radioButton>
        </div>
        <div class="ui-g-12">
          <p-radioButton name="quickFeedBackGrade" value="4" label="Very good"
          [(ngModel)]="categoryGrade" ></p-radioButton>
        </div>
        <div class="ui-g-12">
          <p-radioButton name="quickFeedBackGrade" value="5" label="Ecxelent"
          [(ngModel)]="categoryGrade" ></p-radioButton>
        </div>
      </div>

    </div>

  </p-tabPanel>
</p-tabView>

並且tab.ts僅保存標簽的構建

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css']
})
export class TabsComponent implements OnInit {

  categoriesList: any = ['tab1' , 'tab2' , 'tab3' , 'tab4' ];

  constructor() { }

  ngOnInit() {
  }
}

Answer 1

看來您需要為每個選項卡創建一個categoryGrade 。

將其更改為數組，如下所示： categoryGrade = []; ，然后更改ngModel ，使其變為[(ngModel)]="categoryGrade[i]" 。

這樣，每個選項卡將具有自己的categoryGrade值，並且該問題將不再發生。

這是一個正常工作的StackBlitz