如何在angular4中设置下拉值?

时间:2017-12-21 10:57:51

标签: javascript html angular angular4-forms

我有一个下拉列表,我传递了一些值,现在我想设置下拉列表的选择,我该怎么做

这是我的代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dataset: any[] = [
    { value: 'one', key: 1 },
    { value: 'two', key: 2 },
    { value: 'three', key: 3 },
    { value: 'four', key: 4 }
  ]

  selectionChanged(data) {
    debugger;
  }
}

HTML

<div>
  <select (change)="selectionChanged($event.target.value)">
      <option *ngFor="let item of dataset;let i=index " [value]="item.key" >{{item.value}}</option>
    </select>
</div>

1 个答案:

答案 0 :(得分:2)

您需要使用[(ngModel)]指令。

HTML

<select [(ngModel)]="selectedItem" (change)="selectionChanged($event.target.value)">
  <option *ngFor="let item of dataset;let i=index " [value]="item.key" >{{item.value}}</option>
</select>

打字稿

this.selectedItem = dataset[0].key;