如何循环遍历对象数组中的对象数组并使用 Angular/Ionic 在我的 HTML 中显示？

Posted 2023-02-22

【中文标题】如何循环遍历对象数组中的对象数组并使用 Angular/Ionic 在我的 HTML 中显示？

【英文标题】：How do I loop through an array of objects that's within an array of objects and display in my HTML using Angular/Ionic?

【发布时间】：2021-12-28 21:20:19

【问题描述】：

我有一个这样的界面：

export interface SeriesCard 
  type: string,
  imageUrl: string,
  title: string,
  category: string,
  seriesItems: SeriesItems[];

我的服务已经有模拟数据，我的.ts 文件看起来像：

seriesCard: SeriesCard[];
  title: string = "";

  constructor(private navCtrl: NavController,
              private cardService: CardsService,
              private navExtraService: NavExtrasServiceService)  

  navigateToPage(seriesItems: SeriesItems) 
    this.navExtraService.setExtras(seriesItems);
    this.navCtrl.navigateForward([`video-component`]);
  

  ngOnInit() 
    this.seriesCard = this.cardService.getSeriesCardsArray();
    console.log(this.seriesCard);
  

在我的 html 文件中，我正在执行 *ngFor 来循环遍历我的 seriesCard，如下所示：

<ion-content>
  <ion-grid class="ion-no-padding">
    <ion-row>
      <ion-col size="12" *ngFor="let cards of seriesCard; let i = index">
        <ion-list class="ion-list-background">
          <ion-item (click)="navigateToPage(cards.seriesItems[i])" class="ion-item-background" lines="none" style="border-bottom: 1px solid #343436;">
            <ion-avatar slot="start">
              <img src="cards.seriesItems[i].imageUrl" >
            </ion-avatar>
            <ion-label>
              <h2 style="color: #ffffff">cards.seriesItems[i].title</h2>
              <ion-text class="smaller">cards.seriesItems[i].description</ion-text>
            </ion-label>
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

我的问题是我需要遍历我的SeriesItems[]，它位于我的 HTML 中的SeriesCard[] 中。我怎么做？因为目前，在我的模拟数据中，我有 2 个 SeriesCards 对象，每个对象都有 4 个 SeriesItems 对象。但是我的 *ngFor 只循环了两次，因为它在顶层而不是下一层循环 (SeriesItems[])。

我该如何解决这个问题？

我尝试添加另一个 *ngFor，但效果不佳。感谢您的支持。

编辑：我已经尝试了第二个 *ngFor。我上面显示的 HTML 应该在单个 SeriesCard 中显示SeriesItems 的#。在这种情况下，它将显示 4 个项目，而不是 8 个！

【参考方案1】：

您需要在 <ion-item> 标签上再添加一个 *ngFor，因为 SeriesItems[] 是数组。

<ion-item *ngFor="let seriesItem of cards.seriesItems">
    <ion-avatar slot="start">
       <img src="seriesItem.imageUrl" >
    </ion-avatar>
    <ion-label>
       <h2 style="color: #ffffff">seriesItem.title</h2>
       <ion-text class="smaller">seriesItem.description</ion-text>
    </ion-label>
</ion-item>

【讨论】：

我已经尝试过了，但它并不太奏效，因为在另一个 for 循环中添加了那个 for 循环，所以一切都是双倍的，因为我已经在循环了..跨度>

例如，当我添加那个 for 循环，然后在我的 标签中，我做 seriesItems.title，它会显示 8 次，实际上，有每个 SeriesCard 对象中只有 4 个 SeriesItems 对象。

@Donnygroezinger 你有 2 个 SeriesCards 对象，每个都有 4 个 SeriesItems 对象，所以 8 次是对的！

并使用seriesItem.title 而不是seriesItems.title

但这不是我想要的！