Ionic 6页面嵌套展示数据失败问题排查求助

1. 主组件HTTP请求数据赋值错误 #

BookingsPage的ngOnInit中，HTTP请求的订阅回调里没有正确赋值返回的数据，反而把this.orders赋值给自身，导致数据从未更新，同时日志打印的是未赋值的空数组。

原错误代码：

this.http.get<Orders[]>('http://localhost:3000')
.subscribe(order => {
  console.log('Response', this.orders)
  this.orders = this.orders
})

修正代码：

this.http.get<Orders[]>('http://localhost:3000')
.subscribe(response => {
  console.log('Response', response)
  this.orders = response
})

2. 子组件模板变量绑定错误 #

order.html中存在多处绑定错误：

• 子组件接收的输入属性是order（单数），但模板中误用了复数orders
• 变量名与属性名之间存在多余空格（如orders. checkInDate）
• 属性与文本描述不匹配（如“Check-in”绑定totalPrice，“Total Price”绑定reservationDate）
• 引用了Orders接口中不存在的prepayment属性

原错误片段：

<ion-label class="completed">Check-in {{orders. checkInDate}}</ion-label>
<ion-label class="completed">Check-in {{orders. totalPrice}}</ion-label>
<ion-label class="completed">Number of guests {{orders. prepayment}}</ion-label>

修正后片段：

<ion-label class="completed">Check-in {{order?.checkInDate}}</ion-label>
<ion-label class="completed">Total Price {{order?.totalPrice}}</ion-label>
<!-- 若prepayment是新增属性，需先更新Orders接口；否则删除该行 -->

3. 子组件输入属性未处理空值 #

子组件的@Input() order: Orders未标记为可选，当数据未加载完成时会触发空值错误，建议添加可选标记并在模板中使用安全导航操作符?.：

子组件OrderPage修正代码：

@Input() order?: Orders;

模板中使用安全导航：

{{order?.checkInDate}}

4. 接口重复定义 #

主组件和子组件都重复定义了Orders接口，易导致不一致问题，建议将接口抽离到单独的模型文件（如src/app/models/order.model.ts）：

order.model.ts：

export interface Order {
  reservationDate: Date;
  adultsNumber: number; // 建议用小写number而非Number（原始类型）
  childrenNumber: number;
  checkInDate: Date;
  checkOutDate: Date;
  totalPrice: number;
  // 若需要prepayment，添加该属性
  // prepayment?: number;
}

然后在两个组件中导入：

import { Order } from '../models/order.model';

内容的提问来源于stack exchange，提问作者Nikita Kononov