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

我有一个名为favoriteList的数组。这包含我从Firestore检索的数据，包含图片、标题和描述等。我尝试循环浏览这些数据，以两列行布局显示图像。 然而，当我尝试循环数据时，它会循环两次，而不是期望的一次。 我已经尝试了下面的代码，这在我附加的图像结果

{{item？.title}}
{{item？.description}}
{{item？.title}}
{{item？.description}}

---

如何修复此问题？

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

<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>

{{item？.title}}
{{item？.description}}

您的循环很好，您只需显示相同的

离子卡两次

<ion-card>   
  <img [src]="item.image[0]">
  <div class="card-title">{{ item?.title }}</div>
  <div>{{ item?.description }}</div>  
</ion-card>   

只有你需要做一些事情，比如：

<ion-grid>
  <ion-row>
    <ion-col size="6" *ngFor="let item of data">
      <ion-card>Your Item</ion-card>
    </ion-col>
  </ion-row>
</ion-grid>


您的物品
为什么要在列上使用4的值。？您真的希望右侧有一个空的4列吗？您可以共享favoriteList中的数据吗？@catcat您可以在
ion col
<ion-content>
  <ion-grid *ngFor ="let favorite of favoriteList">
    <ion-row>
      <ion-col size="6" *ngFor="let item of favorite?.favoriteList">
        <ion-card>   
          <img src="item.image[0]">
          <div class="card-title">{{ item?.title }}</div>
          <div>{{ item?.description }}</div>  
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>  
</ion-content>  

<ion-grid>
  <ion-row>
    <ion-col size="6" *ngFor="let item of data">
      <ion-card>Your Item</ion-card>
    </ion-col>
  </ion-row>
</ion-grid>