如何在负载上获取角度6中的下拉列表的选定值（非onchange）

Question

我有一个select下拉列表，我通过循环从数组中获取选项的数据和值。在这里，我需要获取没有onchange（在这种情况下为“最近”）的页面加载时的selected下拉列表的值。这是下面的代码。

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