如何从选择组件中获取选择的值

Question

如何从选择组件中获取选择的值？

select.component.ts：

export class PfSelectComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  @Input() options : Array<Object>;

}

select.component.html

<select [(ngModel)]="selectedValue" id="exampleFormControlSelect1" class="form-control">
  <option *ngFor="let option of options" [ngValue]="option.value">{{option.name}}</option>
</select>

select value: {{selectedValue}}

{{selectValue}}不显示在组件中选择的值。

Answer 1

select.component.html

您应该使用[value]而不是[ngValue]：[ngValue] => [value]

<select [(ngModel)]="selectedValue" id="exampleFormControlSelect1" class="form-control" >
  <option *ngFor="let option of options" [value]="option.value">{{option.name}}</option>
</select>

select value: {{selectedValue}}

select.component.ts

并添加public selectedValue;

export class PfSelectComponent implements OnInit {

  public selectedValue;
  constructor() { }

  ngOnInit() {
  }

  @Input() options : Array<Object>;
}

我用

options = [
    {
      value: 1,
      name : "1"
    },
    {
      value: 2,
      name : "2"
    },
    {
      value: 3,
      name : "3"
    }
  ]

它很好用:)