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

【问题标题】：ngFor to loop first and last objects in a listngFor 循环列表中的第一个和最后一个对象
【发布时间】：2020-03-14 19:24:45
【问题描述】：

** 美好的一天，请我在尝试使用 *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>

【问题讨论】：

这里到底有什么问题？您是否在应用基于第一个和最后一个对象的 CSS 时遇到问题？
我想显示列表中的第一个元素和最后一个元素 eg.const HEROES = [ {id: 1, name:'Superman'}, {id: 2, name:'Batman' }, {id: 5, name:'BatGirl'}, {id: 3, name:'Robin'}, {id: 4, name:'Flash'} ];
请看我的回答。

标签： angular ionic-framework ngfor

【解决方案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>

【讨论】：