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

Question

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

应用.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

Answer 1

我更新了你的 plunker 的 html，所以你的 div 只有在选择了 Paul 时才会显示:

<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) 现在已绑定(bind)到所选值