如何在选项角度中选择所选项目

时间:2017-12-23 19:48:32

标签: angular typescript angular-forms

我有一个dropdown填充了ObjectA类型的某个项目。

item.component.html:

<label>items list:
    <select formControlName="itemsCtl" (change)="onChange()">
        <option *ngFor="let item of itemList" [value]="item">{{item.label}}</option>
    </select>
</label>

在我的反应形式中,我需要拥有所选项目但是当我在互联网上搜索了很多时,我找到了符合我目的的代码:

item.component.ts:

selectedItem : ObjectA;
...
onChange()
{  
    this.selectedItem = this.factorForm.controls['itemsCtl'].value;
}

但当我获得所选项目时,它为[object object],而我需要将所选项目设为ObjectA。如何将所选项目设为ObjectA,或者如何将[object object]转换为ObjectA

使用Angular 5.0.1。

2 个答案:

答案 0 :(得分:1)

尝试使用ngValue指令而不是值。

    <option  *ngFor="let item of itemList"  [ngValue]="item"   >{{item.label}}</option>

答案 1 :(得分:0)

嗯,我不确定你的(itemList)或你的(ObjectA)

的结构是什么

为此,我需要更多信息。

相反,如果您的方法不起作用,请尝试以下方法:

<label>items list:
<select formControlName="itemsCtl" (change)="onChange()" [(ngModel)]="someVar">
    <option *ngFor="let item of itemList" [value]="item">{{item.label}}</option>
</select>

然后在你的函数中:

selectedItem : ObjectA;
someVar: any;
...
onChange()
{  
    this.selectedItem = this.factorForm.controls['itemsCtl'].value;
    console.log(someVar);
}

看看它得到了什么输出。

希望这一切都有帮助!