ExpressionChangedAfterItHasBeenCheckedError PrimeNG 两个单选按钮绑定到相同的属性答案

【问题标题】：ExpressionChangedAfterItHasBeenCheckedError PrimeNG Two Radio Buttons binding to same propertyExpressionChangedAfterItHasBeenCheckedError PrimeNG 两个单选按钮绑定到相同的属性
【发布时间】：2019-10-03 21:44:05
【问题描述】：

TLDR：将两个单选按钮绑定到相同的底层属性会导致无效行为和错误“ExpressionChangedAfterItHasBeenCheckedError”

环境：Angular 7.3.8，PrimeNg 7.1.3

StackBlitz 中的示例： https://stackblitz.com/edit/angular-primeng-playground-t7nmfx

最终，我明白这里发生了什么。单选按钮的两个实例在尝试设置初始状态时相互干扰，并且在设置一个或另一个时也会相互干扰。但我不知道如何摆脱这种情况。显然，这是一个超级简化的示例，屏幕布局已提供给我，因此我无法将收音机移到选项卡之外。我真的不知何故需要其中两个。另外我不确定这是否与 PrimeNG 有关。

HTML：

<p-tabView>
  <p-tabPanel header="today">
    <div>
      Temperature: {{tempToday}}
    </div>
    <div>
      Show in: 
      <p-radioButton name="groupname" [value]="1" [(ngModel)]="isCelcius"></p-radioButton> C
      <p-radioButton name="groupname" [value]="0" [(ngModel)]="isCelcius"></p-radioButton> F
    </div>
  </p-tabPanel>
  <p-tabPanel header="tomorrow">
    <div>
      Temperature: {{tempTomorrow}}
    </div>
    <div>
      Show in: 
      <p-radioButton name="groupname" [value]="1" [(ngModel)]="isCelcius"></p-radioButton> C
      <p-radioButton name="groupname" [value]="0" [(ngModel)]="isCelcius"></p-radioButton> F
    </div>
  </p-tabPanel>
</p-tabView>

组件：

  ngOnInit() {
    this.isCelcius = false;
    this.tempToday = 78;
    this.tempTodayInF = 78;
    this.tempTodayInC = 20;
    this.tempTomorrow = 80;
    this.tempTomorrowInF = 80;
    this.tempTomorrowInC = 21;
  }

public get isCelcius(): boolean {
  return this._isCelcius;
}

public set isCelcius(value: boolean ) {
  this._isCelcius = value;
  if(this._isCelcius) {
    this.tempTomorrow = this.tempTomorrowInC;
    this.tempToday = this.tempTomorrowInC;
  } else {
    this.tempTomorrow = this.tempTomorrowInF;
    this.tempToday = this.tempTodayInF;
  }
}

  private _isCelcius: boolean;
  public tempToday: number;
  public tempTomorrow: number;

  private tempTodayInF: number;
  private tempTodayInC: number;
  private tempTomorrowInF: number;
  private tempTomorrowInC: number;

【问题讨论】：

标签： angular7 primeng

【解决方案1】：

我将把它留在这里，以防有人遇到同样的问题。

问题并不像看起来那样。导致问题的原因是单选按钮组名称重复。更改任一选项卡中的组名称可解决此问题。

      <p-radioButton name="groupname1" [value]="1" [(ngModel)]="isCelcius"></p-radioButton> C
      <p-radioButton name="groupname1" [value]="0" [(ngModel)]="isCelcius"></p-radioButton> F

【讨论】：