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中不可见，但它是行程的一部分。如何将HTML的dateRange属性传递给函数？

我收到以下控制台错误：

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]中传递对象时它不会抱怨，它似乎并没有使用{{1 }}。

从那里开始，如果您在[ngValue]中console.log进行事件，则应该看到带有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>

如何通过html

2 个答案: