angular2 ngif selected 显示所需的形式

Question

我是 angular2 的新手

我想创建一个功能，当用户选择一个选项时，将显示所需的表格。

这是我的html code

<label class="col-md-3 form-control-label" for="select">Zone</label>
<div class="col-md-9">
<select class="form-control" id="select" name="select" size="1">
<option *ngFor="let obj of zone"  value={{obj.id}} ngDefaultControl>
 {{obj?.name}}</option>
</select>
 </div>

假设用户选择了第 1 区，然后出现第 1 区的表单。如果用户选择 Zone 2，则会出现 Zone 2 的表单。等等。我如何在 Angular2 中创建这些函数？我希望表单出现在同一个 html 页面中。

Answer 1

您可以这样做： - 在组件 class 中声明一个属性来保存选定的区域 - 然后根据上面的属性

使用 ngIf

<label class="col-md-3 form-control-label" for="select">
<div *ngIf="selectedid==1">
Zone1
</div>
<div *ngIf="selectedid==2">
Zone2
</div>
</label>
<div class="col-md-9">
<select class="form-control" id="select" [(ngModel)]="selectedid" name="select" size="1">
<option *ngFor="let obj of zone"  value={{obj.id}} ngDefaultControl>
 {{obj?.name}}</option>
</select>
 </div>

Answer 2

您可以像下面这样简单地使用 switch case 来做到这一点。我的 HTML 文件：

<label class="col-md-3 form-control-label" for="select">Zone</label>
<div class="col-md-9">
  <select class="form-control" id="select" name="select" size="1" [(ngModel)]="selected">
<option *ngFor="let obj of zone"  value={{obj.id}} ngDefaultControl>
 {{obj?.name}}</option>
</select>
</div>

<div [ngSwitch]="selected">
  <div *ngSwitchCase="1">
    <p>1st Form</p>
  </div>
  <div *ngSwitchCase="2">
    <p>2nd Form</p>
  </div>
  <div *ngSwitchCase="3">
    <p>3rd form</p>
  </div>
</div>

我的 TypeScript 文件

 zone:Array<Object>=[
    {id:1,name:"Name One"},
    {id:2,name:"Name Two"},
    {id:3,name:"Name Three"}
  ];
  selected:number=0;

angular2 ngif selected 显示所需的形式

angular2 ngif selected show required form

html

angular