使用 Angular 2 绑定 [!hidden] 以选择框选项答案

【问题标题】：bind [!hidden] to select box option with Angular 2使用 Angular 2 绑定 [!hidden] 以选择框选项
【发布时间】：2017-12-19 10:01:07
【问题描述】：

我正在尝试使用 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'];
}

so when "in progress" option will be selected I want to show that hidden div, otherwise the div will be hidden for the other options.

【问题讨论】：

在 select 上使用 [ngModel] 并将 div 上的条件设置为 [hidden]="yourngmodelvariable!=='In Progress'"
尝试将*ngIf 用于in progress 并在选择时设置[ngModel]
@Vivz 把它作为评论来获得你的分数 ;) ty！
好的，我会把它作为答案发布:)

标签： html angular typescript angular2-forms

【解决方案1】：

在组件内部创建一个变量。

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

在选择时添加 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>

【讨论】：

【解决方案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>

【讨论】：

还有一件事，似乎禁用的“”不再默认选中，知道吗？它在列表中，但不像选中的那样。
将默认选择的值分配给您的 [ngModel]