Html 如何在angular 7中单击按钮时获取下拉列表的选定值和选定文本

我有一个下拉选择，在这里单击我需要控制台所选文本（绿色..）和所选值（1..）的按钮，我尝试使用ngmodel，但我只能捕获值，并且在选择字段中显示空选项。下面是代码

home.component.html

---

如果要在选中时将整个对象存储为值，可以尝试以下操作：

<select [(ngModel)]="value">
  <option *ngFor="let status of statusdata" [ngValue]="status"> 
   {{status.name}}</option>
</select>

默认情况下，该选项应为选定的第一个选项。然后，如果要打印值，只需执行以下操作：

console.log(this.value.id);
console.log(this.value.name);

---

要获得预期的结果，请使用下面的选项，即在component.html和commponent.ts中使用Formbuilder、FormGroup和Form控件名称

component.html

将表单名称作为

[formGroup]=“profileForm”

为select设置formControlName，即

formControlName=“name”

`component.ts
3.声明formgroup并使用formbuilder初始化名称

profileForm: FormGroup
 constructor(private formBuilder: FormBuilder) {
this.profileForm = this.formBuilder.group({
    name: new FormControl(1)
});  

四,。在按钮上，单击使用

this.profileForm.get（'name'）获取值。值

register(){
    console.log('selected Value', this.profileForm.get('name').value);
    console.log('selected name', this.statusdata.filter(v => v.id == this.profileForm.get('name').value)[0].name);
}

参考工作守则样本-

---

有关反应式表单的更多详细信息，请参阅此链接-

谢谢您的回答，假设您更改了选项，然后按下按钮，此时它也会显示选定的值，它会显示相同的值，因为它是硬编码的。statusdata[0]您没有硬编码该值，您只需要在init上设置它。看一看这个例子：谢谢你的回答在这个例子中，我在选择加载更新的stackblitz中得到空选项，提供初始值显示在行名称：new FormControl（1）

console.log(this.value.id);
console.log(this.value.name);

profileForm: FormGroup
 constructor(private formBuilder: FormBuilder) {
this.profileForm = this.formBuilder.group({
    name: new FormControl(1)
});  

register(){
    console.log('selected Value', this.profileForm.get('name').value);
    console.log('selected name', this.statusdata.filter(v => v.id == this.profileForm.get('name').value)[0].name);
}