Question

我正面临隐藏的问题，并根据我从选择框中选择的值显示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);)
  }
}

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

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

Answer 2

我在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;

Answer 3

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

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

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

Answer 4

在您的组件类中添加一个名为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: []
})

以下是基于selectbox值的更新plunker的链接

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

使用Angular2

4 个答案: