如何在Angular 7中单击按钮时获取下拉列表的选定选项[重复]

Posted 2023-02-22

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

【英文标题】：How to get the selected option of dropdown on click of a button in Angular 7 [duplicate]

【发布时间】：2020-01-07 16:07:12

【问题描述】：

我有一个下拉列表，其中包含来自循环的一些选项，我需要在单击按钮时获取选定的选项（不是值）。我尝试使用ngModel，但我能够获得价值，而不是选项。谁能帮帮我吗？下面是代码

app.component.html

<div>
    <select>
        <option *ngFor="let group of groups" value="group.id">group.name</option>
    </select>
</div>
<input type="button" (click)="getVal()" value="submit"/>

app.component.ts

import  Component, ViewChild, ElementRef  from '@angular/core';

@Component(
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
)

export class AppComponent 

    ngOnInit() 

    

    getVal() 

    

    groups = [
        "id": 1,
        "name": "pencils",
        "items": "red pencil"
    ,
    
        "id": 2,
        "name": "rubbers",
        "items": "big rubber"
    ,
    
        "id": 3,
        "name": "rubbers1",
        "items": "big rubber1"
    ];

【问题讨论】：

“我需要获取选定的选项（不是值）”到底是什么意思？你想要name吗？

是的，我需要名字

使用indexOf() 方法查找您选择的选项

我知道我也在使用值 group.name

【参考方案1】：

        import  Component  from '@angular/core';
@Component(
selector: 'app-pager',
template: `
<div><select (change)="Selected($event)"><option *ngFor="let group of groups" [value]="group.name">group.name</option></select></div>
<input type="button" (click)="getVal()" value="submit"/>
<h4 [hidden]="hide">the name selected :  selected  OR for click button :  button  </h4>
`
)
export class PagerComponent 

selected : string = '';
button : string = '';

hide : boolean = true;
  Selected(event: any)
    //update the ui
    this.selected = event.target.value;
    this.hide=false;
  
// or you can use the button :
getVal()
this.button=this.selected;

groups=[
  
    "name": "select your chois",
    "items": ""
  ,
     
       "name": "pencils",
       "items": "red pencil"
     ,
     
       "name": "rubbers",
       "items": "big rubber"
     ,
     
       "name": "rubbers1",
       "items": "big rubber1"
     
  ];



    //you can give a value groups.name and working with $event 

【参考方案2】：

只需使用ngModel 绑定到选定的值。由于您想从选定的选项中同时获取id 和name，因此最好获取选定的整个对象。您可以使用ngValue（来源：docs）来执行此操作。

<select [(ngModel)]="selectedGroup">
    <option *ngFor="let group of groups" [ngValue]="group">group.name</option>
</select>

selectedGroup: any;

getVal() 
    console.log(this.selectedGroup); // returns selected object
    console.log(this.selectedGroup.id); // returns selected option's id
    console.log(this.selectedGroup.name); // returns selected option's name

【讨论】：

我也有价值 group.name

如果您想要name，为什么要将值设置为group.items？我仍然不清楚你想要什么，你只是想要items和name作为一个整体的对象吗？

在这种情况下它的 group.items 但在我们的项目中，值将像 group.id 一样存在

这不能回答我的问题。你能清楚你到底想要什么吗？在问题的 cmets 中，你提到你想要这个名字，上面的答案会给你。如果这不是您想要的，请告诉我您希望在getVal 函数中得到什么，如果您选择pencils（例如）

我只需要名称，但是当我将 value 放入 option 时，它无法显示错误，我更新了上面的问题。只是我需要在单击按钮时显示所选选项的值

【参考方案3】：

试试这样：

模板：

<div>
  <select [(ngModel)]="selectedgroup">
     <option *ngFor="let group of groups">group.name</option>
  </select>
  </div>
<input type="button" (click)="getVal()" value="submit"/>

打字稿：

 selectedgroup: any

  getVal() 
    console.log(this.selectedgroup)
    console.log(this.groups.filter(x => x.name == this.selectedgroup)[0].items)
  

见Stackbiltz Demo

【讨论】：

不使用值 group.name 抛出错误跨度>

我更新了我上面的问题

试试 console.log(this.groups.filter(x => x.items == this.selectedgroup)[0].items)

在设置值时，可以直接对所提到的值或名称进行控制台操作