Angular 将“ngModel”与无线电输入结合使用以显示或隐藏节

我正在构建一个用户界面，用户可以在其中创建两种类型的内容，即链接和消息

我会使用内置解决方案，例如Ionic中的段组件，但由于设计要求，这是不可能的

我现在做的是我有两个无线电输入

<input [(ngModel)]="notificationCreateType" type="radio" id="notification_type_link" name="notificationType" value="0" class="custom-radio" />

<input [(ngModel)]="notificationCreateType" checked type="radio" id="notification_type_message" name="notificationType" value="1" class="custom-radio" />

值0表示链接，1表示消息

            <div *ngIf="notificationCreateType == '0'">
                ... stuffs here
            </div>


            <div *ngIf="notificationCreateType == '1'">
                ... stuffs here
            </div>

当选择任意一个单选选项时，它似乎工作正常，但当页面加载且已选中某个单选选项时，它最初不工作

[ngModel]=notificationCreateType肯定会使用无线电输入的值并将notificationCreateType设置为该值，但当通过设置checked属性检查输入时，它不会执行相同的操作

我想做的是让ngModel尊重输入的checked属性，或者更好的是，我可以在组件的ts文件中设置notificationCreateType的初始值，该文件用于在模板中自动检查无线电输入

这是可能的，因为我查阅了很多文档，包括官方的Ionic和Angular文档，仍然没有找到关于无线电输入的详细信息

从模板中删除选中的属性。这是无用的，因为Angular会用notificationCreateType的起始值覆盖选中的值。所以你就应该

<input [(ngModel)]="notificationCreateType" type="radio"
        name="notificationType" value="0"/>

<input [(ngModel)]="notificationCreateType" type="radio"
        name="notificationType" value="1"/>

---

Angular将为您检查默认单选按钮。

Wow！这真是太棒了。我排除了public关键字，但仍然有效，我希望这不会在将来造成任何问题。谢谢除非指定了private，否则假定为public，所以我认为这不会引起问题。

public notificationCreateType = '1';