Ionic中解决NgFor报错并展示products内party子内容的方法

错误原因 #

你遇到的报错是因为*ngFor仅支持遍历数组这类可迭代对象，而原代码中遍历的products[0]是普通对象（包含theater和party属性），并非数组，因此Angular无法识别该对象的遍历方式。

最优解决方案：将对象转换为数组后遍历 #

要展示products中party对应的子对象内容，最直接高效的方式是在组件中将party对象转换为数组，再在模板中遍历。

1. 修改组件代码（home.ts）

在HomePage类中添加一个getter方法，提取party对象的所有值并转为数组：

export class HomePage {
  public products: any[] = [
    {
      theater: {
        '30': {
          id: '44',
          name: 'product 30',
        },
      },
      party: {
        '31': {
          id: '45',
          name: 'product 45',
        },
        '32': {
          id: '46',
          name: 'product 46',
        },
      },
    },
  ];

  // 获取party对应的产品数组
  get partyProducts() {
    // 处理数据为空的边界情况，避免报错
    if (!this.products[0]?.party) return [];
    // 将对象的值转换为数组
    return Object.values(this.products[0].party);
  }

  constructor(
    public navCtrl: NavController,
    public alertCtrl: AlertController
  ) {}
}

2. 修改模板代码（home.html）

直接遍历转换后的partyProducts数组，展示每个产品的信息：

<div *ngFor="let product of partyProducts">
  <ion-card style="padding:0; margin:0; border-radius: 0; border-bottom: solid rgb(215, 215, 215) 1px;">
    <ion-card-content style="padding:0; margin:0;">
      <ion-list>
        <ion-item lines="none" style="color: black;">
          <ion-thumbnail slot="start">
            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" style="border-radius: 50%;" />
          </ion-thumbnail>
          <ion-label>
            <p style="font-weight: 800; color: black;">Name: {{product.name}}</p>
            <p style="color: black;">31/12 às 22hrs</p>
            <p style="font-style: italic; color: black;">Cachaçamba,</p> 
            <p style="color: black;">Rio Verde - GO</p>           
          </ion-label>      
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
</div>

可选：保留对象键的方案 #

如果需要保留party对象中的键（如31、32），可以使用Object.entries()将对象转换为键值对数组：

get partyProductsWithKeys() {
  if (!this.products[0]?.party) return [];
  return Object.entries(this.products[0].party);
}

模板中遍历键值对：

<div *ngFor="let [key, product] of partyProductsWithKeys">
  <ion-card style="padding:0; margin:0; border-radius: 0; border-bottom: solid rgb(215, 215, 215) 1px;">
    <ion-card-content style="padding:0; margin:0;">
      <ion-list>
        <ion-item lines="none" style="color: black;">
          <ion-thumbnail slot="start">
            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" style="border-radius: 50%;" />
          </ion-thumbnail>
          <ion-label>
            <p style="font-weight: 800; color: black;">ID: {{key}} | Name: {{product.name}}</p>
            <p style="color: black;">31/12 às 22hrs</p>
            <p style="font-style: italic; color: black;">Cachaçamba,</p> 
            <p style="color: black;">Rio Verde - GO</p>           
          </ion-label>      
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
</div>

方案优势 #

• 组件内处理数据转换，避免模板中频繁执行对象转换操作，性能更优
• getter方法会自动响应products数据的变化，保证视图实时更新
• 边界情况处理（如products为空）避免了潜在的空指针报错

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