Question

我正在构建一个包含选项卡的页面-这些选项卡是数据库中的动态信息，但为简单起见，我手动对其进行了定义。

每个选项卡都有一个相同的单选按钮（还有一个保存按钮，还有更多但为了简单起见-我删除了它）。

选择单选按钮之一时出现此错误

ExpressionChangedAfterItHaHasBeenCheckedError：检查表达式后，表达式已更改。先前值：“ 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-expressionchangedafterithasbeencheckederror-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拥有自己的值，并且该问题将不再发生。

Here is a working StackBlitz

ExpressionChangedAfterItHasBeenCheckedError：角度

1 个答案: