时间戳

首页 > 解决方案 > 嵌套多个 mat-radio-button 未按预期工作

html - 嵌套多个 mat-radio-button 未按预期工作

问题描述

我有 mat-radio-group，里面有更多的 mat-radio-group。我在这里创建了一个 stackblitz https://stackblitz.com/edit/angular-mdgy7x?file=app/radio-overview-example.ts

在页面加载的示例中，我想显示选择的“分类帐”单选选项以及它下面的 value1 作为默认选择。如果我将单选按钮更新为“可用”，我需要选择“可用”单选下方的“值 1”。

该代码适用于所有情况，除了我必须显示默认选择的第一种情况。

有人能指出我哪里出错了吗？

标签： htmlangularangular-material

解决方案

出于某种原因，嵌套单选组/按钮需要第二个更新周期才能正确更新默认状态。实现此目的的一种方法是在onRadioFilterChanged()使用默认值调用之前在其中一个生命周期挂钩中添加 0ms 超时。我发现这个工作的最早的钩子是ngOnInit(). 您还需要将所有选中的属性设置为，false以便实际发生状态更改，从而触发更新。

所以，添加

ngOnInit() {
    setTimeout(_=> this.onRadioFilterChanged('L'), 0);
}

并在每个组中的第一个复选框上进行设置checked: false也可以解决问题，如更新的 stackblitz 所示： https ://stackblitz.com/edit/angular-mdgy7x-dcijkt?file=app%2Fradio-overview-example.ts

尽管有 0 毫秒超时，但您会注意到页面加载略有延迟，但除此之外以及它的那种 hack-ish 感觉，它可以工作 - 我无法让它在任何情况下工作到目前为止的其他方式。

推荐阅读