ngFor循环列表中的第一个和最后一个对象

Question

** 美好的一天，我在尝试使用 *ngFor 时遇到了困难检索数组的第一个和最后一个对象**

<ion-item *ngFor="let payment of allPaymentGateways; let first = first; let last = last "              [ngClass]="{first: first, last: last}">
                <ion-label>
                  <ion-row class="full" class="align-items-center">
                    <ion-col size="10">
                      <ion-row class="align-items-center">
                        <p class="no-margin">
                          <strong>{{ payment.method_title }}</strong>
                        </p>
                      </ion-row>
                      <ion-row class="align-items-center">
                        <p>{{ payment.description }}</p>
                      </ion-row>
                    </ion-col>
                  </ion-row>
                </ion-label>
                <ion-radio slot="start" (click)="choosePaymnetGateway(payment)"></ion-radio>
              </ion-item>

Answer 1

要仅显示数组中的第一项和最后一项，请使用 *ngIf 指令。尝试以下

<ion-item *ngFor="let payment of allPaymentGateways; let first=first; let last=last" [ngClass]="{first: first, last: last}">
  <ng-container *ngIf="first || last">
    <ion-label>
      <ion-row class="full" class="align-items-center">
        <ion-col size="10">
          <ion-row class="align-items-center">
            <p class="no-margin">
              <strong>{{ payment.method_title }}</strong>
            </p>
          </ion-row>
          <ion-row class="align-items-center">
            <p>{{ payment.description }}</p>
          </ion-row>
        </ion-col>
      </ion-row>
    </ion-label>
    <ion-radio slot="start" (click)="choosePaymnetGateway(payment)"></ion-radio>
  </ng-container>
</ion-item>

ngFor循环列表中的第一个和最后一个对象

ngFor to loop first and last objects in a list

angular

ionic-framework

ngfor