由于该单选按钮，导致ExpressionChangedAfterItHasBeenCheckedError

Question

我正在使用角度5，在我的html中，我使用了单选按钮。通过选中该单选按钮并单击旁边的按钮可以打开一个模态，该模态还包含一个默认选中的单选按钮。但是在打开该模式时会导致ExpressionChangedAfterItHaHasBeenCheckedError。当我从模式中删除单选按钮时，此问题未显示。

这是组件中的单选按钮

<mat-radio-button [checked]="item.isChecked" class="mat-radio-button-sm"(click)="selectedReservation(item)"></mat-radio-button>

这是模态单选按钮

<mat-radio-button [checked]="ccPayInfo?.checked" ></mat-radio-button>

Answer 1

在初始化后使用构造函数protected cdr:ChangeDetectorRef依赖项和this.cdr.detectChanges();即可解决此问题。

Answer 2

您需要使单选按钮的作用域本质上是命名空间

对于单选按钮，假定在分组的单选按钮中选择是唯一的（当您选择一个单选按钮时，请取消选中所有其他单选按钮）

因此，在这种情况下，您不会将单选按钮分组在mat-radio组或命名空间中，因此被假定为“全局”组的一部分。这意味着您的单选按钮将与页面上的所有其他单选按钮交互（通过单击模态单选按钮之外的单选按钮，将取消选中模态单选按钮，因为再次假定选择在分组的单选按钮中是唯一的）

要对单选按钮进行分组，您只需添加一个名称即可：

<mat-radio-button name="group1" ... >
<mat-radio-button name="group1" ... >
<mat-radio-button name="group2" ... >

现在，单选按钮将仅考虑作用域名称内的唯一性。

您还可以与mat-radio-button-group分组

<mat-radio-group [(ngModel)]="modelboundthinger">
    <mat-radio-button [checked]="true" ... >
    <mat-radio-button [checked]="false" ... >
</mat-radio-group>

Answer 3

不确定这是否可以帮助任何人。

我收到相同的错误

      <mat-radio-group name="category">
        <mat-radio-button
          name="category"
          *ngFor="let category of categories"
          class="pulse-filter-menu-option"
          value="filterTypes[7].tempSelected.has(category.id)"
          [checked]="filterTypes[7].tempSelected.has(category.id)"
          (click)="toggleSelection(category, filterTypes[7].tempSelected)">
          {{ category.name }}
        </mat-radio-button>
      </mat-radio-group>

我只是将值用大括号括起来，然后消失了。

          [value]="filterTypes[7].tempSelected.has(category.id)"

P.S-我为此浪费了3个小时

Answer 4

对我来说，即使它在mat-radio-group中，我也需要在mat-radio-button上添加 name 属性，以消除错误。