異步管道使用選擇/選項和ngModel/ngModelChange

Question

問題描述

我試圖做一個select/option基於下拉工作使用asyncPipe和[ngModel]/(ngModelChange)可觀察到的領域。我的代碼有些問題，因爲在運行時控制檯輸出[object Object]（請參閱下圖）。

令我困惑的是，如果我使用[value]="payPeriod.id"，它工作正常，數字id成功收到setSelectedPayPeriod(...)方。

component.html

<select [ngModel]="selectedPayPeriod | json" (ngModelChange)="setSelectedPayPeriod($event)"> 
    <option *ngFor="let payPeriod of (payPeriodList | async)" [value]="payPeriod">{{ payPeriod.endDate }}</option> 
    </select> 

component.ts

get payPeriodList(): Observable<PayPeriod[]> { 
    return this._contextService.payPeriodList; 
} 

get selectedPayPeriod(): Observable<PayPeriod> { 
    return this._contextService.selectedPayPeriod; 
} 

setSelectedPayPeriod(newValue: PayPeriod): void { 
    console.warn(newValue); 
    this._contextService.setSelectedPayPeriod(newValue); 
} 

控制檯輸出

道歉

對不起，我對plunker不是很熟悉，不能很快找到一個我可以工作的Angular 2模板。

UPD。 option元素由AJT_82

1. 使用[ngValue]而不是[value] - 接受的解決方案。
2. 使用[ngModel]="selectedPayPeriod | async"而不是[ngModel]="selectedPayPeriod | json"對select元素。

---

<select [ngModel]="selectedPayPeriod | async" (ngModelChange)="setSelectedPayPeriod($event)"> 
    <option *ngFor="let payPeriod of (payPeriodList | async)" [ngValue]="payPeriod">{{ payPeriod.endDate }}</option> 
    </select> 

Answer 1

payPeriod是一個對象，所以如果你想整個對象綁定，使用[ngValue]代替[value]。

<option *ngFor="let payPeriod of (payPeriodList | async)" [ngValue]="payPeriod">{{ payPeriod.endDate }}</option>