Angular 2 typescript：如何基于单选按钮显示下拉列表和文本框答案

【问题标题】：Angular 2 typescript:How to show dropdown and textbox based on radio buttonAngular 2 typescript：如何基于单选按钮显示下拉列表和文本框
【发布时间】：2017-02-16 04:11:23
【问题描述】：

我的 UI 包含两个单选按钮 YES 和 NO，如何根据这些单选按钮值显示下拉菜单和文本框。例如，如果用户单击“是”收音机，则需要显示下拉菜单，如果用户选中“否”收音机，则文本框应使用 Angular 2 typescript 显示。请任何人提供链接或帮助我做。

【问题讨论】：

你可以使用 *ngIf。如需更好的解决方案，请输入一些代码。
另见stackoverflow.com/questions/42315828/…，这是同一个问题，有更多细节。

标签： html css angular typescript

【解决方案1】：

对 aholtry 的答案进行小改动，因为不幸的是，这不起作用。单选按钮的值不是boolean，而是string，所以必须根据字符串值检查值，这里我使用了“是”和“否”。

所以：

<input type="radio" [(ngModel)]="radioValue" value="yes" />YES
<input type="radio" [(ngModel)]="radioValue" value="no"/>NO

<select *ngIf="radioValue == 'yes'">
    <option>Some Option</option>
</select>

<input type="text" *ngIf="radioValue == 'no'" />

这应该让你开始！ :)

【讨论】：

谢谢，但是如何在通过单选按钮切换时清除下拉列表和文本框值。
不确定你的意思，你能详细说明一下吗？目前，我的答案中的代码在单选按钮之间切换时会清除选择和输入。但我猜你还有一些代码？

【解决方案2】：

这是一个没有看到您的代码的简单示例。如果你能给出一个代码示例，那么我可以详细说明。

<div>
    <input type="radio" [(ngModel)]="radioValue"  name="radioValue" value="true" />YES
    <input type="radio" [(ngModel)]="radioValue"  name="radioValue" value="false" />NO
</div>
<div>
    <select *ngIf="!radioValue">
        <option>Some Option</option>
    </select>
    <input type="text" *ngIf="radioValue" />
</div>

【讨论】：