使用 Angular 将 [!hidden] 绑定到 select 框选项 2

Question

我正在尝试使用 Angular 2+ 将 show/hide 行为添加到 select 框，所以基本上我有 :

 <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'];
}

所以当 "in progress" 选项被 select 编辑时，我想显示隐藏的 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 核心模块导入所有依赖项。

<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>

使用 Angular 将 [!hidden] 绑定到 select 框选项 2

bind [!hidden] to select box option with Angular 2

html

typescript

angular2-forms

angular