如何在单击角度7中的按钮时获取下拉列表的选定值和选定文本[重复]

Posted 2023-02-22

【中文标题】如何在单击角度7中的按钮时获取下拉列表的选定值和选定文本[重复]

【英文标题】：How to get selected value and selected text of a dropdown on click a button in angular 7 [duplicate]

【发布时间】：2020-02-21 03:34:57

【问题描述】：

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

home.component.html

<select>
<option *ngFor="let status of statusdata" value="status.id">status.name</option>
</select>
<button type="submit" (click)="register()" class="btn btn-primary mr-1">Register</button>

home.component.ts

import  Component, OnInit  from '@angular/core';
import  FormBuilder, FormGroup, Validators  from '@angular/forms';
@Component(
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
)
export class HomeComponent implements OnInit  
    dotsh:any;
    hoverIndex:number = -1;
    groups:any;
    test:any;
 constructor(private formBuilder: FormBuilder) 


     
     onHover(i:number)
 this.hoverIndex = i;

     columns = ["name", "Items","status"];



  ngOnInit() 
      this.test = false;
      this.statusdata = ["id":1,"name":"green","id":2,"name":"red","id":3,"name":"yellow"];
 

register()
    console.log('selected Value');
    console.log('selected name');

【参考方案1】：

如果您想要在选择时将整个对象存储为一个值，您可以试试这个：

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

然后在你的组件中声明变量值，要么不定义它，要么将它分配给你想要的值（它需要是整个对象）。例如：

export class HomeComponent implements OnInit  
  statusdata = ["id":1,"name":"green","id":2,"name":"red","id":3,"name":"yellow"];
  value = statusdata[0];
  ....

这应该默认为选择的第一个选项。然后，如果您只想打印该值：

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

【讨论】：

感谢您的回答，假设您更改选项然后按下按钮，此时它也应该显示选定的值，它显示相同的值，因为它的硬编码 this.statusdata[0]

你没有硬编码这个值，你只是应该在初始化时设置它。看看这个例子：stackblitz.com/edit/…

感谢您的回答

【参考方案2】：

为达到预期效果，请使用以下选项，在 component.html 和 commponent.ts 中使用 Formbuilder、FormGroup 和 Form Control 名称

component.html

为您的表单使用表单名称[formGroup]="profileForm" 为选择设置formControlName，即formControlName="name"

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

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

4。在按钮上单击获取值使用this.profileForm.get('name').value

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);

示例工作代码供参考 - https://stackblitz.com/edit/angular-unnal4?file=src/app/app.component.ts

有关反应式表单的更多详细信息，请参阅此链接 - https://angular.io/guide/reactive-forms

【讨论】：

在这种情况下，我在加载时选择为空选项

更新了stackblitz，提供要在行名处显示的初始值：new FormControl(1)