NgFor循环中的离子4列放置

Question

我尝试使用NgFor一次。我想实现这个layout。这段代码有效，但是我不想遍历两次

<ion-row>
  <ng-container *ngFor="let it of (item | async)?.sections">
    <ng-container *ngIf="it.name !== 'Account' && it.name !== 'Settings'">
      <ion-col size="{{it.size}}">
        <div>
          <ion-card class="alone {{it.color}}">
            <ion-card-header>
              <ion-img [src]="'/assets/images/'+it.icon"></ion-img>
              <ion-card-title>{{it.name}}</ion-card-title>
            </ion-card-header>
          </ion-card>
        </div>
      </ion-col>
    </ng-container>
  </ng-container>
  <ion-col size="2"> <--- SHOW IT ONCE
    <ng-container *ngFor="let it of (item | async)?.sections">
      <ng-container *ngIf="it.name === 'Account' || it.name === 'Settings'">
        <ion-row align-items-center>
          <div style="width: 100%">
            <ion-card class="{{it.color}}">
              <ion-card-header>
                <ion-img [src]="'/assets/images/'+it.icon"></ion-img>
                <ion-card-title>{{it.name}}</ion-card-title>
              </ion-card-header>
            </ion-card>
          </div>
        </ion-row>
      </ng-container>
    </ng-container>
  </ion-col>
</ion-row>

如果我尝试将两个循环组合在一起，则会给我两列

<ion-row>
  <ng-container *ngFor="let it of (item | async)?.sections">
    <ng-container *ngIf="it.name !== 'Account' && it.name !== 'Settings'">
      <ion-col size="{{it.size}}">
        <div>
          <ion-card class="alone {{it.color}}">
            <ion-card-header>
              <ion-img [src]="'/assets/images/'+it.icon"></ion-img>
              <ion-card-title>{{it.name}}</ion-card-title>
            </ion-card-header>
          </ion-card>
        </div>
      </ion-col>
    </ng-container>
    <ng-container *ngIf="it.name === 'Account' || it.name === 'Settings'">
      <ion-col size="2"> <--- WILL BE PRINTED TWICE
        <ion-row align-items-center>
          <div style="width: 100%">
            <ion-card class="{{it.color}}">
              <ion-card-header>
                <ion-img [src]="'/assets/images/'+it.icon"></ion-img>
                <ion-card-title>{{it.name}}</ion-card-title>
              </ion-card-header>
            </ion-card>
          </div>
        </ion-row>
      </ion-col>
    </ng-container>
  </ng-container>
</ion-row>

如果我尝试做某事链接*ngIf="(index % 3) == 0"，它将打印一次该列，但是我将无法输入第二次在同一列中打印Row2。

我不确定是否可行。谢谢：）

Answer 1

您可以使用ng-template共享相同的逻辑

https://angular.io/api/common/NgTemplateOutlet#description

<ion-row>
    <ng-container *ngFor="let it of (item | async)?.sections">
        <ng-container *ngIf="it.name !== 'Account' && it.name !== 'Settings'">
            <ng-container *ngTemplateOutlet="col; context: it"></ng-container>
        </ng-container>
    </ng-container>
    <ion-col size="2">
        <ng-container *ngFor="let it of (item | async)?.sections">
            <ng-container *ngIf="it.name === 'Account' || it.name === 'Settings'">
                <ng-container *ngTemplateOutlet="row; context: it"></ng-container>
            </ng-container>
    </ion-col>
</ion-row>

<ng-template #col let-it="it">

    <ion-col size="{{it.size}}">
        <div>
            <ng-container *ngTemplateOutlet="cardHeader; context: it"></ng-container>
        </div>
    </ion-col>

</ng-template>

<ng-template #row>

    <ion-row align-items-center>
        <div style="width: 100%">
            <ng-container *ngTemplateOutlet="card; context: it"></ng-container>
        </div>
    </ion-row>

</ng-template>

<ng-template #card let-it="it">

    <ion-card class="{{it.color}}">
        <ion-card-header>
            <ion-img [src]="'/assets/images/'+it.icon"></ion-img>
            <ion-card-title>{{it.name}}</ion-card-title>
        </ion-card-header>
    </ion-card>

</ng-template>