Async Pipe与Select / Options＆amp; 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>