Question

我在移动应用程序中使用ionic 3。我的项目列表存在问题，我的问题是当我添加一个新项目时它没有显示在列表的顶部，它总是出现在底部，如何正确地执行此操作？

谢谢

示例

添加项目 -

首先 - A

第二 - B

显示

A

B

我想知道如何显示此类型

B


A

项目列表

      <ion-list class="ion-addexe">

        <ion-item *ngFor="let bill of Details">
          <ion-label>
            <p class="ion-lbl" style="position: relative;top:-0.2rem;">{{bill.billdescription}}</p>
          </ion-label>

          <ion-label>
            <p class="ion-lbl" text-right style="position: relative;top:-0.2rem;">$ {{bill.billtotal}}</p>
          </ion-label>
        </ion-item>

      </ion-list>

添加商品

  <div>

    <ion-item >
      <ion-label id="ion-lbls">Select you want</ion-label>
      <ion-select [(ngModel)]="addnewBill_category" okText="Add" cancelText="Close">
        <ion-option  *ngFor="let bill of Category" value="{{bill.billCategoryID}}">{{bill.CategoryName}}</ion-option>
      </ion-select>

    </ion-item>

    <ion-item >
      <ion-label id="ion-lbls">Details</ion-label>
      <ion-input type="text" value="" [(ngModel)] = "addnewBill_description" placeholder="Description"  text-right></ion-input>
    </ion-item>

    <ion-item >
      <ion-label id="ion-lbls">Date</ion-label>
      <ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="event.addnewbill_Date" placeholder="MMM/DD/YYYY"></ion-datetime>
    </ion-item>

    <ion-item>
      <ion-label id="ion-lbls">Total ($)</ion-label>
      <ion-input type="number" [(ngModel)]="addnewBill_amount" value="" placeholder="$0.0"  text-right></ion-input>
    </ion-item>

  </div>
</ion-list>

Answer 1

首先，这是ngFor工作的正确方法，它首先显示第一个元素，然后显示底部的下一个项目，因为无论何时在数组中插入新项目，它都遵循从上到下的方法。所以基本上你想以相反的顺序显示你的数组项目应该是你的问题

对此最简单易行的解决方案是在* ngfor上使用reverse（）。在你的情况下，它将是这样的：

 <ion-item *ngFor="let bill of Details.reverse()">
    ...
 <ion-item>

或另外一个解决方案是使用自定义角度管道，您可以将其应用于* ngFor并按相反的顺序对数组进行排序。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {

  transform(value) {
   if (!value) return;

   return value.reverse();
  }
}

然后在你的html中你可以像这样使用那个管道：

<ion-item *ngFor="let bill of Details | reverse">
    ...
<ion-item>

Ionic最新添加项目未显示在列表顶部

1 个答案: