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