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）

<svg
  version="1.1"
  baseProfile="full"
  width="110" height="30"
  xmlns="http://www.w3.org/2000/svg">
  
  <rect id="redbox" x="0" y="0" width="110" height="30" rx="4" ry="4" style="fill:red;stroke:none;fill-opacity:0" />
  
  <animate xlink:href="#redbox" attributeType="CSS" attributeName="fill-opacity" 
           from="0" to="0.5" dur="1s" begin="click" fill="freeze"/>
  <rect x="5" y="5" width="100" height="20" rx="4" ry="4" fill="none" stroke="black" />
  
  <text dominant-baseline="central" pointer-events="none" font-size="11px">
    <tspan x="10" y="14.5">Highlight on click</tspan>
  </text>
  
</svg>

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

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

组件

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

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

单击“角度选择”下拉菜单中的按钮时，如何选择对象的多重值

2 个答案: