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

【问题标题】：Nesting multiple mat-radio-button not working as expected嵌套多个 mat-radio-button 未按预期工作
【发布时间】：2020-02-04 20:41:14
【问题描述】：

我有 mat-radio-group，其中包含更多 mat-radio-group。我在这里创建了一个堆栈闪电战 https://stackblitz.com/edit/angular-mdgy7x?file=app/radio-overview-example.ts

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

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

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

【问题讨论】：

能否在文本中添加逗号？没有它就很难阅读。
自发布问题以来，您似乎已经更改了 stackblitz 的内容。应该避免这种情况，希望我的回答对您仍然有用。

标签： html angular angular-material

【解决方案1】：

出于某种原因，嵌套单选组/按钮需要第二个更新周期才能正确更新默认状态。实现此目的的一种方法是，在使用默认值调用 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 的感觉，它可以工作 - 我无法做到到目前为止以任何其他方式工作。

【讨论】：

这似乎可行，但就像你说的那样，由于使用了超时，这似乎是一种骇人听闻的方式。我正在考虑替代方法。我将分离单选按钮并在点击时管理它们的状态。这似乎是一个漫长的方法，但至少没有超时。

【解决方案2】：

首先，添加对 ngOnInit 的调用：

ngOnInit(){
    this.onRadioFilterChanged("L");
}

并创建一个变量来保持账本的价值，并且可以像收音机一样使用。然后在 onRadioFilterChanged 中使用该值。

另一件不起作用的事情是当您选择一个子单选按钮时。

【讨论】：

【解决方案3】：

我使用以下代码实现了我想要的。我基本上所做的是为父子和子创建单独的单选按钮，每个单选按钮都有一个与之关联的 ngModel。然后我根据用户交互操作 ngModel。以下是stackblitz， https://stackblitz.com/edit/angular-mdgy7x?file=app/radio-overview-example.ts

【讨论】：