基于单选按钮的角度更改模板元素

Question

我的模板中有两个radio buttons。 选择按钮时，应为每个button显示不同的input文本字段，其他字段应隐藏。

如何使用Angular执行此操作？

我尝试使用*ngIf和ngModel，但无法解决此问题。

Answer 1

看一看：

源代码，堆栈闪电战

演示

.HTML

Type 1: <input type="radio" name="foo" value="type_1" [(ngModel)]="radioBtn">
<br>
Type 2: <input type="radio" name="foo"
 [(ngModel)]="radioBtn" value="type_2">
<br>
<ng-container *ngIf="radioBtn == 'type_1'">
    Type 1: <input type="text" placeholder="Type 1">
</ng-container>
<ng-container *ngIf="radioBtn == 'type_2'">
    Type 2: <input type="text" placeholder="Type 2">
</ng-container>

TS

export class AppComponent  {
  radioBtn: string = 'type_1';
}

解释：

要使单选按钮正常工作，您需要两件事：

1. 您需要为属于一起的所有单选按钮设置相同的名称name="foo"
2. 您需要为每个单选按钮指定值value="bar"