Angular/Ionic中如何遍历嵌套子对象数组并在HTML中渲染展示

问题根因 #

• 现有代码仅遍历了外层SeriesCard数组（共2个元素），因此仅生成2条渲染节点
• 错误使用外层SeriesCard数组的索引i访问内部seriesItems数组的元素，二者下标无关联，无法遍历到内部数组的全部元素
• 之前新增第二层循环不符合预期，大概率是未做分组逻辑，导致两个SeriesCard下的8个item全部平铺渲染

解决方案 #

场景1：仅渲染单个指定SeriesCard下的全部4个SeriesItems #

组件TS代码修改

在原有代码基础上新增目标卡片变量，指定你要渲染的那个SeriesCard：

seriesCard: SeriesCard[];
title: string = "";
// 新增：存储要渲染的目标卡片，这里取第一个，可按需修改索引
targetCard?: SeriesCard;

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();
  // 赋值目标卡片，比如取第一个SeriesCard
  this.targetCard = this.seriesCard[0];
  console.log(this.seriesCard);
}

模板HTML代码修改

直接遍历目标卡片的seriesItems数组即可：

<ion-content>
  <ion-grid class="ion-no-padding">
    <ion-row>
      <!-- 直接遍历目标卡片的seriesItems数组 -->
      <ion-col size="12" *ngFor="let item of targetCard?.seriesItems; let i = index">
        <ion-list class="ion-list-background">
          <ion-item (click)="navigateToPage(item)" class="ion-item-background" lines="none" style="border-bottom: 1px solid #343436;">
            <ion-avatar slot="start">
              <img src="{{item.imageUrl}}" alt="">
            </ion-avatar>
            <ion-label>
              <h2 style="color: #ffffff">{{item.title}}</h2>
              <ion-text class="smaller">{{item.description}}</ion-text>
            </ion-label>
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

场景2：按SeriesCard分组渲染，每个分组下显示自身的4个SeriesItems（不会平铺成8条无归属的内容） #

模板HTML代码修改

无需修改TS代码，外层循环渲染分组信息，内层循环渲染当前分组下的item即可：

<ion-content>
  <ion-grid class="ion-no-padding">
    <!-- 外层循环遍历每个SeriesCard作为分组 -->
    <ng-container *ngFor="let card of seriesCard">
      <!-- 分组标题，可按需展示卡片的分类、标题等信息 -->
      <ion-row>
        <ion-col size="12">
          <h3 style="color: #fff; padding: 10px 15px; margin: 0;">{{card.category}} - {{card.title}}</h3>
        </ion-col>
      </ion-row>
      <!-- 内层循环遍历当前SeriesCard下的所有seriesItems -->
      <ion-row>
        <ion-col size="12" *ngFor="let item of card.seriesItems">
          <ion-list class="ion-list-background">
            <ion-item (click)="navigateToPage(item)" class="ion-item-background" lines="none" style="border-bottom: 1px solid #343436;">
              <ion-avatar slot="start">
                <img src="{{item.imageUrl}}" alt="">
              </ion-avatar>
              <ion-label>
                <h2 style="color: #ffffff">{{item.title}}</h2>
                <ion-text class="smaller">{{item.description}}</ion-text>
              </ion-label>
            </ion-item>
          </ion-list>
        </ion-col>
      </ion-row>
    </ng-container>
  </ion-grid>
</ion-content>

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