如何在负载(而非ONCHANGE)上获得Angular 6中选定的下拉值

Question

我有一个选择的下拉列表，我从数组通过循环获得了选项的数据和值。在这里，当页面加载而无需onchange时，我需要获得所选下拉菜的值(在这种情况下，最近(。这是下面的代码。

app.component.html

<select>
  <option *ngFor="let v of values" [value]="v.id">  
    {{v.name}}
  </option>
</select>

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'projectchart';
 public values = [
  { id: 3432, name: "Recent" },
  { id: 3442, name: "Most Popular" },
  { id: 3352, name: "Rating" }
];
  ngOnInit(){
  alert('The default selected value is');
  }

}

Answer 1

您可以使用反应性表单

constructor(private fb: FormBuilder) { }
// create a form group using the form builder service
formName = this.fb.group({
    name: ['']
})

在模板中

<form [formGroup]="formName">
 <select formControlName="name">
  <option *ngFor="let v of values" [value]="v.id">  
    {{v.name}}
  </option>
 </select>
</>

，然后在TS中获取值：

this.formName.controls['name'].value