Как передать значения свойств из HTML

Question

<ion-select [(ngModel)]="selection" (ionChange)="optionsFn(itinerary.dateRange)">
    <ion-select-option *ngFor="let itinerary of itineraries">{{itinerary.startDate | date: "MM/dd"}} - {{itinerary.endDate | date: "MM/dd"}}</ion-select-option>
</ion-select>

В этом коде dateRange не отображается в html, но является частью маршрутов.Как передать свойство dateRange из HTML в функцию?

Я получаю следующую консольную ошибку:

TypeError: Невозможно прочитать свойство dateRange из неопределенного

Answer 1

Ваш ionChange() не должен иметь itinerary, поскольку он существует только в области действия ion-select-option.

Вместо этого вы можете использовать $event и привязать значение <ion-select-option> к объекту itinerary.

Что-то вроде:

<ion-select [(ngModel)]="selection" (ionChange)='optionsFn($event)'>
  <ion-select-option *ngFor="let itinerary of itineraries" [value]="itinerary">{{itinerary.startDate | date: "MM/dd"}} - {{itinerary.endDate | date: "MM/dd"}}</ion-select-option>
</ion-select>

(Я не знаю всего об ионе под капотом, но по какой-то причине он не жалуется, когда вы передаете объект в [value], он, кажется, вообще не использует [ngValue] .)

Оттуда, если вы console.log ваше событие в optionsFn(e), вы должны увидеть свой объект со свойством dateRange.

Надеюсь, это поможет:)

Answer 2

Использовать value свойство для отображения на selection.

<ion-select [(ngModel)]="selection" (ionChange)="optionsFn(selection.dateRange)">
    <ion-select-option [value]="itinerary" *ngFor="let itinerary of itineraries">{{itinerary.startDate | date: "MM/dd"}} - {{itinerary.endDate | date: "MM/dd"}}</ion-select-option>
</ion-select>