使用 Angular2 根据选择框值显示或隐藏内容 div答案

【问题标题】：Show or hide a content div based upon the selectbox value using Angular2使用 Angular2 根据选择框值显示或隐藏内容 div
【发布时间】：2018-03-09 20:03:15
【问题描述】：

我遇到了根据我从选择框中选择的值隐藏和显示 div 的问题。我是 Angular 技术的新手。我试过了，但它不能通过使用函数来工作。我得到了我可以通过简单地使用（ng-model）来完成的信息。这里可以吗？

app.ts

//our root app component

import {Component, Directive, ElementRef} from 'angular2/core'

@Component({
  selector: 'my-app',
  directives: [],
  providers: [],
  template: `
    <div>
      <h2>Show Hidden{{name}}</h2>
      <label>Choose</label>
      <select [(ngModel)]="productCategory" name="Select name" class="ui fluid search selection dropdown"> 
                  <option value=""></option>
                  <option value = "YES">Yes</option>
                  <option value="NO">No</option>
      </select>
    </div>
    <br><br>
      <div class="row" id="informationDiv" style="display:none">
                <div class="col-md-3 form-group">
                  <label class="control-label">showing</label>
                  <input class="form-control" id="productName">
                </div>
      </div>

  `,
  directives: []
})
export class App {


  constructor() {
    setTimeout(() => {
      jQuery('.ui.dropdown').dropdown();
    }, 1000);)
  }
}

我的插件代码：https://plnkr.co/edit/Mh0yHafi0dmsAynLEQYB?p=preview

【问题讨论】：

使用ngIf根据ngModel值productCategory隐藏div
请在下面查看我的答案，我只是使用了 ngModel

标签： javascript jquery html css angular

【解决方案1】：

我更新了你的 plunker 的 html，所以只有当 Paul 被选中时你的 div 才会显示：

<div>
      <h2>Hello {{name}}</h2>
      <label>Name</label>
      <select #selectt [(ngModel)]="name" name="Select name" class="ui fluid search selection dropdown"> 
        <option *ngFor="#n of names" [attr.value]="n">{{n}}</option>
      </select>
      <div class="row" id="informationDiv" *ngIf="name === 'Paul'">
                <div class="col-md-3 form-group">
                  <label class="control-label">showing</label>
                  <input class="form-control" id="productName"  [(ngModel)]=name>
                </div>
      </div>
    </div>

作为站点注释，您可以看到输入 (id=productName) 现在已绑定到所选值

【讨论】：

【解决方案2】：

你可以参考这个。 [ngIf 指令][1]

[1]：https://v2.angular.io/docs/ts/latest/guide/template-syntax.html#!#ngIf.

在下拉菜单中添加点击功能。在 ts 文件中设置值并获取 html 中的值。将该值用于 ngIf 条件。像这样 ==> <div *ngIf="value==yes"> </div>

【讨论】：

【解决方案3】：

在你的组件类中添加一个名为productCategory的新属性来存储[(ngModel)]的值，然后使用*ngIf来隐藏/显示div，如下所示

export class App {
  name: string = "Ringo";
  names: string[] = ["John", "Paul", "George", "Ringo"]
  productCategory:string = "";
  constructor() {
    setTimeout(() => {
      jQuery('.ui.dropdown').dropdown();
    }, 1000);)
  }
}




@Component({
  selector: 'my-app',
  directives: [],
  providers: [],
  template: `
    <div>
      <h2>Show Hidden {{name}}</h2>
      <label>Choose</label>
      <select [(ngModel)]="productCategory" name="Select name" class="ui fluid search selection dropdown"> 
                  <option value=""></option>
                  <option value = "YES">Yes</option>
                  <option value="NO">No</option>
      </select>
    </div>
    <br><br>
      <div class="row" id="informationDiv" *ngIf="productCategory == 'YES'">
                <div class="col-md-3 form-group">
                  <label class="control-label">showing</label>
                  <input class="form-control" id="productName">
                </div>
      </div>
  `,
  directives: []
})

这是一个基于选择框值的更新 plunker 的链接

https://plnkr.co/edit/TMoXrf3VWdjYGXFoJLnf?p=preview

【讨论】：

@DeepakVijay 这应该是选择的答案，因为我的版本之前已发布，但如您所愿

【解决方案4】：

我在 plnkr 上修复了它：https://plnkr.co/edit/Mh0yHafi0dmsAynLEQYB?p=preview

只需像这样添加 [(ngModel)] 和 *ngIf：

<div>
      <h2>Show Hidden{{name}}</h2>
      <label>Choose</label>
      <select id="me" [(ngModel)]="chosenValue" class="ui fluid search selection dropdown"> 
                  <option value=""></option>
                  <option value = "YES">Yes</option>
                  <option value="NO">No</option>
      </select>
    </div>
    <br><br>
      <div *ngIf="chosenValue==='YES'" class="row" id="informationDiv">
                <div class="col-md-3 form-group">
                  <label class="control-label">showing</label>
                  <input class="form-control" id="productName">
                </div>
      </div>

并在您的 TS 文件中添加一个 selectedValue：

  chosenValue;

【讨论】：