Angular 材质 mat-radio-group 不允许使用 ngModel 的默认值答案

【问题标题】：Angular material mat-radio-group doesn´t allow default value with ngModelAngular 材质 mat-radio-group 不允许使用 ngModel 的默认值
【发布时间】：2021-12-10 16:52:51
【问题描述】：

我目前正在努力使用 mat-radio-group 实现更复杂的实现。我将 Angular 版本从 10 升级到 13，现在 mat-radio-group 中的默认值不再被识别。

为简单起见，您可以使用 Angular Material 中的示例重现它：https://material.angular.io/components/radio/examples

使用“Radios with ngModel”的堆栈闪电战。不幸的是我不能分叉它。然后尝试将“冬季”设置为默认值。重新编译后不会检查。

是使用 [checked] 属性解决此问题的唯一方法吗？ Angular 做了什么改变来改变这种行为？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

在我的记忆中，用于设置默认单选按钮的 checked 属性一直存在，至少从 Material 9.x（可能更早）开始。

您可以尝试以下方法吗：

在你的 TS 代码中：

将您最喜欢的季节选择设置为常量字符串值：

favoriteSeason: string = 'Spring';

然后在您的 HTML 中为每个 mat-radio-button 控件设置 ngFor 循环中的 checked 属性，如下所示：

[checked]="favoriteSeason == season"

因此，您的广播组将如下所示：

<mat-radio-group
      aria-labelledby="example-radio-group-label"
      class="example-radio-group"
      [(ngModel)]="favoriteSeason">
    <mat-radio-button
        class="example-radio-button"
        *ngFor="let season of seasons"
        [value]="season"
        [checked]="favoriteSeason == season">
        {{ season }}
    </mat-radio-button>
</mat-radio-group>

以上内容应为您提供所需的默认选择。

编辑：您可能已经对上述内容进行了试验，发现如果我们在 TS 代码中设置初始值，则不需要 checked 条件。

尝试以下方法：

在您的 TS 代码中，不要分配绑定变量。就这样吧：

favoriteSeason: string;

接下来，添加以下 HTML 按钮：

<button (click)="setValue()">Press Here</button>

现在，定义按钮点击事件setValue如图：

setValue() {
    this.favoriteSeason = 'Autumn';
}

上述运行时，没有初始选择。当您单击按钮时，季节将设置为'Autumn'！

以上显示您可以使用代码或使用选中属性设置默认单选选项。

【讨论】：

感谢您的回答。我知道它是这样工作的。但这是理想的实现吗？我的意思是无线电组已经知道通过 ngModel 选择了哪个元素。为什么我必须用选中的属性检查它？它之前没有检查过的属性。
对于要在单选按钮中设置的默认值，选中的属性必须在其条件下从 ngModel 读取值。这就是我理解输入绑定工作的方式。我将使用可以使用选中属性的其他场景来更新答案。