Question

我正在尝试使用Angular 2+将显示/隐藏行为添加到选择框中，所以基本上我有：

 <select>
      <option disabled selected>Flow progres</option>
      <option *ngFor='let flow of flows'>{{flow}}</option>
    </select>

      <div [hidden]="true">
        <p>The flow progress is on going</p>
      </div>

和.ts：

export class ProductListComponent implements OnInit{
    flows = ["Passed",'Waiting','In Progres',' Failed'];
}

所以当选择“进行中”选项时，我想显示隐藏的div，否则div将被其他选项隐藏。

Answer 1

在组件内创建一个变量。

public showHide:boolean = false; //Set default value if you like else not

在select上添加onChange事件：

<select #t (change)="handleSelectedValue(t.value)">
      <option disabled selected>Flow progres</option>
      <option *ngFor='let flow of flows'>{{flow}}</option>
    </select>

在组件中

写下这样的函数：

handleSelectedValue(value) {
 // Get and value and assign it to variable declared above 
     if(value == 'In Progres')
    this.showHide = true;

}

在你的html中将这个showHide变量绑定到Div，如下所示：

<div *ngIf="showHide">
        <p>The flow progress is on going</p>
</div>

Answer 2

按以下方式更改HTML。从angular core module导入所有依赖项。

<select [ngModel]="selected">
    <option disabled selected>Flow progres</option>
    <option *ngFor='let flow of flows'>{{flow}}</option>
</select>

<div [hidden]="selected!=='In Progress'">
    <p>The flow progress is on going</p>
</div>

绑定[！hidden]以选择Angular 2的框选项

2 个答案: