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

Question

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

我怎样才能做到这一点Angular？

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

Answer 1

看一看：

源代码，StackBlitz

演示

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"