Question

我正在寻找一种实时反转我的火力列表的方法。

例如：我得到了这个火力列表：

{apple，orange，banana}; ==反转后=＆gt; {banana，orange，apple}

如果我添加新项（不刷新页面），我的列表应该是这样的：

{apple，orange，banana，other} == reversed =＆gt; {other，banana，orange，apple}

我使用此代码尝试反转列表但出现错误：

<div *ngFor="let f of fruitsList | reverse async">

我也检查了这个，但列表没有反转

<div *ngFor="let f of fruitsList | async reverse">

我查看了此链接[Is it possible to reverse a Firebase list?]，但未按照我的要求

运行应用程序时很好，但是当我添加任何新项目时，列表显示为图片。

Img for list after adding new item

注意：FruitList定义为

Public fruitList: FirebaseListObservable<any[]>

Answer 1

试

<div *ngFor="let f of fruitsList.reverse() | async ">

谢谢， 0

这适用于简单的数组。对于FireBaseObservable，您可能希望执行类似这样的操作（从此处获取https://angularfirebase.com/snippets/how-to-reverse-an-observable-array-in-angular-angularfire2-firebaselistobservable/）创建这样的管道

import { Pipe, PipeTransform } from '@angular/core';    
@Pipe({
     name: 'reverse'
 })
 export class ReversePipe implements PipeTransform {

 transform(value) {

 if (!value) return;
         return value.reverse();
    }
}

并像这样使用

<div *ngFor="let f of fruitsList | async | reverse">

Angular 2 - 添加新项目后如何反转火力列表

1 个答案: