angular - 如何 *ngFor 循环通过 Angular 7/Ionic 4 中的两列？

Question

我有一个名为 favoriteList 的数组。这包含我从 Firestore 检索的数据，包含图片、标题和描述等。我正在尝试遍历这些数据，以两列行布局显示图像。但是，当我尝试遍历数据时，它会循环两次，而不是期望的一次。我尝试遵循下面的代码，这导致了我附上的图像。

<ion-content>
  <ion-grid *ngFor ="let favorite of favoriteList">
    <ng-container *ngFor="let item of favorite?.favoriteList;let i = index;">
      <ion-row>
        <ion-col size="4">
          <ion-card>   
            <img [src]="item.image[0]">
            <div class="card-title">{{ item?.title}}</div>
            <div>{{item?.description}}</div>  
          </ion-card>
        </ion-col>
        <ion-col size="4">
          <ion-card>   
            <img [src]="item.image[0]">
            <div class="card-title">{{ item?.title}}</div>
            <div>{{item?.description}}</div>  
          </ion-card>
        </ion-col>
      </ion-row>
    </ng-container>
  </ion-grid>  
</ion-content>

我怎样才能解决这个问题？

标签： angulartypescriptionic-frameworkionic4

Answer 1

您正在输出两列，因此它似乎循环了两次，但实际上您的两列是相同的，我在下面删除了一个。

<ion-content>
          <ion-grid *ngFor ="let favorite of favoriteList">
              <ng-container>
            <ion-row>
            <ion-col size="6" *ngFor="let item of favorite?.favoriteList;let i = index;">
                <ion-card>   
                        <img [src]="item.image[0]">
                        <div class="card-title">{{ item?.title}}</div>
                        <div>{{item?.description}}</div>  
                </ion-card>
            </ion-col>
          </ion-row>
        </ng-container>
          </ion-grid>  
        </ion-content>