Ionic Angular NgModel 错误引用了接口中的子对象

Posted 2023-03-13

【中文标题】Ionic Angular NgModel 错误引用了接口中的子对象

【英文标题】：Ionic Angular NgModel error reference a subobject in interface

【发布时间】：2018-10-01 02:41:37

【问题描述】：

这是我的界面：

booking.interface.ts

export interface Booking 
  "dateBooking": Date;
  "period": 
    "morning": boolean;
    "afternoon": boolean;
    "night": boolean;
  

addbooking.ts

...
import  Booking  from '../../models/booking/booking.interface';
...
export class AddbookingPage 

  //declare a property of interface type
  public booking =  as Booking;

   constructor() 
  
...

当我尝试在视图中引用 booking.period.morning 或我的对象 period 的任何子属性时，Ionic 会引发错误：

addbooking.html

  <ion-item>
    <ion-label>Morning</ion-label>
    <ion-checkbox [(ngModel)]="booking.period.morning"></ion-checkbox> 
  </ion-item>

错误：

TypeError: undefined is not an object (evaluating '_co.booking.period.morning')

我尝试实现一个复选框并将数据保存在 Firebase 中。如果有任何其他方法可以实现这一点，我接受建议。

【问题讨论】：

使用类代替接口

public booking 是一个空对象，as Booking 只告诉 Typescript，它应该将 拦截为 Booking 类型。

如果稍后要初始化，可以在 html 中使用安全导航运算符

【参考方案1】：

您需要：

初始化你的对象以匹配你的界面

public booking: Booking = 
  dateBooking: new Date(),
  period: 
   morning: true,
   afternoon: false,
   night: false, 
    

或隐藏复选框，直到对象具有 period.morning 属性。

<ion-item>
  <ion-label>Morning</ion-label>
  <ion-checkbox *ngIf="booking && booking.period && typeof booking.period.morning === 'boolean'" [(ngModel)]="booking.period.morning"></ion-checkbox> 
</ion-item>

【讨论】：

谢谢。它解决了我的问题。我不知道是否需要初始化对象。

很高兴我能帮上忙。您可以投票并接受我的回答吗？ :)

我试过了，但是：〜感谢您的反馈！声望低于 15 人的投票将被记录，但不会更改公开显示的帖子分数。〜