javascript - 单击选择标签中的选项并检查值时创建创建输入

Question

我正在尝试使用 Angular 2 创建一个应用程序，我有一个表单并选择标签和选项。我希望当用户单击每个选项时检查选项的值，如果例如值等于“aaa”，则输入字段会生成底部选择标签。 我尝试了很多但无法解决这个问题:)

如果有人能够澄清我上面列出的问题，我将不胜感激。

谢谢...

  <select name="delivery_architecture" class="form-control testing">
          <option selected="selected">plz select</option>
          <option value="static">static</option>
          <option value="dynamic">dynamic</option>
          <option value="aaa" >aaa</option>
  </select>

Answer 1

您可以在选择选项时填充数组，然后使用 *ngFor 生成输入元素。

@Component({
    selector: 'my-app',
    template: `
  <select name="delivery_architecture" class="form-control testing" (change)="addInput($event.target.value)">
    <option selected="selected">plz select</option>
    <option value="static">static</option>
    <option value="dynamic">dynamic</option>
    <option value="aaa" >aaa</option>
  </select>

  <div *ngFor="#inp of inputs" >{{inp.name}}<input [ngModel]="inp.value"></div>
  <div><button (click)="showValues()">show values</button></div>

  <div>values: {{values}}</div>
    `,
})
export class AppComponent {
  inputs = [];
  addInput(name) {
    this.inputs.push({name: name, value: ''});
  }
}

写入输入元素的值也存储在数组中。

Plunker example