如何从单个选择中获取包含对象的选定选项 - 角度答案

【问题标题】：How can I get selected option contain object from single select - angular如何从单个选择中获取包含对象的选定选项 - 角度
【发布时间】：2020-04-09 14:44:42
【问题描述】：

我有如下对象数组：

var GlobalArray = [{'id':1,'Name':"ABC"},{'id':2,'Name':"XYZ"}]

我想在选择下拉列表时获取对象值，但我没有得到它。

<select [(ngModel)]="docvalue" (change)="modify($event.target.value)" >
    <option *ngFor="let fop of GlobalArray " [value]="fop" selected]="fop.Name.IsSelected" >
      <h6>{{fop.Name}}</h6>
    </option>
</select>

（但在函数中我得到[object object]）

modify(obj){console.log("obj")
}

【问题讨论】：

而不是[value]="fop" 使用[ngValue]="fop"

标签： javascript html angular typescript rxjs

【解决方案1】：

组件：

GlobalArray = [{'id':1,'Name':"ABC"},{'id':2,'Name':"XYZ"}];

// Choose whatever you want as the selected option on page load. 
// Set null if none to be selected.
docvalue = this.GlobalArray.find(x => x.id == 1); 

modify(){
  console.log(this.docvalue);
}

HTML：

<select [(ngModel)]="docvalue" (change)="modify()" >
    <option  *ngFor="let fop of GlobalArray " [ngValue]="fop">
      <h6>{{fop.Name}}</h6>
    </option>
</select>

由于您使用的是双向绑定，因此您可以简单地使用this.docvalue 来获取选定的值。

Working demo

【讨论】：

【解决方案2】：

在值中绑定fop.id，如果想要选中的对象，就用.find()

试试这样：

.html

<select [(ngModel)]="docvalue" (ngModelChange)="modify($event)" >
    <option *ngFor="let fop of GlobalArray " [value]="fop.id" [selected]="fop.Name.IsSelected" >
      <h6>{{fop.Name}}</h6>
    </option>
</select>

.ts

modify(id) {
   console.log(id);
   let obj = this.GlobalArray.find(x => x.id == id);
   console.log(obj);
}

Working Demo

【讨论】：

【解决方案3】：

这样试试

使用[ngValue] 代替[value] 并将docvalue 传递给modify(docvalue) function

<select [(ngModel)]="docvalue"  (change)="modify(docvalue)">
    <option *ngFor="let fop of GlobalArray "  [ngValue]="fop" [selected]="fop.Name.IsSelected" >
      {{fop.Name}}
    </option>
</select>

工作stackblitz

【讨论】：

【解决方案4】：

请像下面这样使用

<option *ngFor="let fop of GlobalArray " [ngValue]="fop.Name" [selected]="fop.Name.Name === 'ABC">

它将选择数组中的 {'id':1,'Name':"ABC"} 选项希望对你有帮助

【讨论】：

【解决方案5】：

您可以在ngModelChange 上传递$event 并使用[value]="fop.Name"

试试这个：

<select [(ngModel)]="docvalue" (ngModelChange)="modify($event)" >
    <option *ngFor="let fop of GlobalArray " [value]="fop.Name" [selected]="fop.Name.IsSelected" >
      <h6>{{fop.Name}}</h6>
    </option>
</select>

这是工作 example

【讨论】：

【解决方案6】：

试试这个：使用 (ngModelChange)="modify($event)" 代替 (change)="modify($event.target.value)" 并将 [value]="fop" 更改为 [value]="fop.Name"

<select [(ngModel)]="docvalue" (ngModelChange)="modify($event)" >
        <option *ngFor="let fop of GlobalArray " [value]="fop.Name" >
          <h6>{{fop.Name}}</h6>
        </option>
</select>

【讨论】：