Asynchronous tube used with Select / Options & ngModel / ngModelChange

Question

Description of the problem

I am trying to do drop-down work select/ optionwith observable fields with asyncPipeand [ngModel]/ (ngModelChange). Something is wrong with my code, because at runtime the console displays [object Object](see the figure below).

What confuses me is that if I use it [value]="payPeriod.id", it works fine, and the numeric idwill be successfully received on the side 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);
}

Console exit

Apology

Sorry, I am not very familiar with plunker and cannot quickly find the Angular 2 template that I can disable.

UPD. Decision taken - AJT_82

• Use [ngValue]instead [value]in the element option.
• Use [ngModel]="selectedPayPeriod | async"instead [ngModel]="selectedPayPeriod | json"in the element 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>