angular – 与Select / Options和ngModel / ngModelChange一起使用的异步管道

我正在尝试使用asyncPipe和[ngModel] /(ngModelChangE)使用可观察字段进行基于选择/选项的下拉列表工作.我的代码出了点问题,因为在运行时控制台会输出[object Object](请参见下图).

令我困惑的是,如果我使用[value] =“payPeriod.id”,它工作正常,并且在setSELEctedPayPeriod(…)方面成功接收到数字ID.

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提供

>在选项元素上使用[ngValue]而不是[value].
>在SELEct元素上使用[ngModel] =“SELEctedPayPeriod | async”而不是[ngModel] =“SELEctedPayPeriod | json”.

<SELEct [ngModel]="SELEctedPayPeriod | async" (ngModelChangE)="setSELEctedPayPeriod($event)">
    <option *ngFor="let payPeriod of (payPeriodList | asynC)" [ngValue]="payPeriod">{{ payPeriod.endDate }}</option>
  </SELEct>