angular - 我如何从选择的组件中获取选定的值

Question

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

选择.component.ts:

export class PfSelectComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  @Input() options : Array<Object>;

}

选择.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

选择.component.html

你应该使用 [value] 而不是 [ngValue] :[ngValue] => [值]

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

select value: {{selectedValue}}

选择.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"
    }
  ]

效果不错:)