与无线电输入结合使用`ngModel`显示或隐藏部

我建立一个用户接口，其中用户可以创建两种类型的内容即LINK和MESSAGE。与无线电输入结合使用`ngModel`显示或隐藏部

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

我做的是什么，我有两个无线电输入

<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文档，仍然没有发现关于无线电输入的详细信息。

来源

2017-11-11 Deepak Kamat

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

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

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

然后在组件类，只需设置初始值：

public notificationCreateType = '1';

角将检查默认的单选按钮，你的照顾。

来源

2017-11-11 18:20:12 BeetleJuice

哇！这工作非常漂亮。我排除'公共'关键字，仍然工作，我希望这不会在未来造成任何问题。谢谢！ –

除非指定'private'，否则假定'public'，所以我认为它不会引起问题。 – BeetleJuice

与无线电输入结合使用`ngModel`显示或隐藏部

回答

相关问题