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

【问题标题】：How can i get selected value from a select component如何从选择组件中获取选定的值
【发布时间】：2018-08-19 23:58:33
【问题描述】：

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

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}} 不显示组件中选择的值。

【问题讨论】：

您是否将selectedValue 添加为PfSelectComponent 类的成员？
@Input() selectedValue; 喜欢这个？没用

标签： angular typescript components

【解决方案1】：

select.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}}

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"
    }
  ]

效果很好:)

【讨论】：