时间戳

首页 > 解决方案 > 在 *ngFor 中获取完整的下拉列表项

angular - 在 *ngFor 中获取完整的下拉列表项

问题描述

我想获取我当前在下拉列表中选择的元素的完整对象。目前我得到了选定的值，这对我来说很好！但另外我想获得完整的对象。我该怎么做？

<select  [(ngModel)]="user" (change)="fn_consolidadoUsuario()"  mdbInput    > 
    <option *ngFor="let item of aUser" [value]="item.iduser">{{item.name}} 
    </option>


user:any
aUser:
[
{
    "iduser":1, "name":"joe"
},
{
    "iduser":1, "name":"berta"
},
{
    "iduser":1, "name":"francisco"
}
]


this.user=1; //value by default

fn_consolidadoUsuario(){
 console.log(this.user)// 1
 //also I need the actual item    {"iduser":1, "name":"joe"}
}

标签： angular

解决方案

使用[ngValue]="item"和[compareWith]="compareData"为此。

Stackblitz 演示

组件.ts

user:any={"iduser":2,"name":"berta"} 

aUser=[
    {"iduser":1, "name":"joe"},
    {"iduser":2, "name":"berta"},
    {"iduser":3, "name":"francisco"}
]

fn_consolidadoUsuario(){
    console.log(this.user)
}

compareData(a, b) {
    return a && b && a.iduser == b.iduser;
}

组件.html

<select  [(ngModel)]="user" (change)="fn_consolidadoUsuario()"  mdbInput  [compareWith]="compareData"  > 
    <option *ngFor="let item of aUser" [ngValue]="item">{{item.name}} 
    </option>
</select>

<pre>{{user | json}}</pre>

推荐阅读