Async Pipe与Select/Options&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.接受的解决方案 - 由AJT_82提供

1. 使用[ngValue],而不是[value]对option元素.
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是一个Object,所以如果你想绑定整个对象,请使用[ngValue]而不是[value].

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