单击角度选择选项下拉菜单中的按钮时如何选择对象的多个值

Question

我将 JSON 结果放在选择下拉菜单的选项列表中

[
{
    "id": "1596700684533_",
    "name": "Usman Abbas Ghulam Abbas",
    "fcm": "344"
},
{
    "id": "1596700972722_",
    "name": "Muhammad Ali",
    "fcm": "0"
},
{
    "id": "1596702420255_",
    "name": "Abdul Hannan Abdul Mannan",
    "fcm": "234"
}
]

• 点击按钮时如何选择完整的对象和对象的值，如 id 和 fcm

我的 component.htlm 代码是

<select (change)="Selected($event)">
              <option *ngFor="let group of groups" [value]="group.fcm">
                {{group.name}}
              </option>
            </select>

当前点击按钮我可以获得一个值 id 或 fcm

Selected(event: any){
//update the ui
this.selectedName = event.target.value;
//this.selectedId = event.targent.value.id
this.hide=false;



}


getVal(){
  this.button=this.selectedName;
  console.log("hre is selected values for option " + this.selectedName);
 

  }

Answer 1

您可以简单地将选项的值设置为id。在您的 (change) 事件发射器处理程序中，找到具有该 ID 的项目

见下方代码Link to stackblitz demo

<select (change)="Selected($event)">
  <option *ngFor="let group of groups" [value]="group.id">
    {{group.name}}
  </option>
</select>

打字稿文件

  Selected($event) {
    const selectedObject = this.groups.find(({id}) => id === event.target['value'])
    this.selectedName = selectedObject.name
    this.selectedId = selectedObject.id
  }

Answer 2

第一种方式（设置组而不是 group.fcm）

<option *ngFor="let group of groups" [value]="group">

第二种方式（获取 fcm / id 并在其上过滤现有记录）

<option *ngFor="let group of groups" [value]="group.id">

组件

 Selected(event: any){
  this.selectedObj= data.filter(item => item.id = event.target.value)
  this.hide=false;
}

我认为第二种方式可以让您更好地控制数据集和 ui 可见性。