如何实时反转可观察列表Angular 2答案

【问题标题】：How to reverse observable list in real time Angular 2如何实时反转可观察列表Angular 2
【发布时间】：2017-07-28 03:50:42
【问题描述】：

当我想在添加新项目后反转我的可观察列表时遇到问题

我在第一次启动时用这种方式反转它

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

    @Pipe({
    name: 'reverse'
    })

    export class ReversePipe implements PipeTransform { 
      transform (value) {
        if(!value)return;
        return value.reverse();
      }
    }

在 HTML 中

    <div *ngFor="let msg of (msgsList | async) | reverse">

但添加任何新项目后，列表显示为这张图片[List after adding ]

我还检查了此链接 [ https://stackoverflow.com/questions/40293539/is-it-possible-to-reverse-a-firebase-list ] 但结果相同

【问题讨论】：

你解决了这个问题吗？我有完全相同的问题..

标签： ionic2

【解决方案1】：

假设你和我有同样的情况，并且在服务器端有一个列表，在有角度的前端有一个副本。您可以在后端使用.push() 附加到列表，但在客户端使用.unshift()。

因此，每次您从服务器重新查询列表时，您仍然使用 | reverse，但是当您将.unshift() 添加到列表时，您会在前端列表中将ajax POST 发送到使用@ 的服务器端987654325@.

如果您只有客户端应用程序，我假设您只能使用 .unshift() 而不能使用反向管道。

我是如何使用它的：

客户端：

private messageStore = [];
private messageSubject = new Subject();
messages = this.messageSubject.asObservable();

//..

this.messageStore.unshift(newMessage);
this.messageSubject.next(this.messageStore);

//..

<div *ngFor="let message of (webService.messages | async) | reverse">

然后 ajax Post 到服务器和服务器这样做：

messages.push(req.body);

每次刷新页面或从服务器加载整个消息列表时，您只需将其设置为新的客户端列表。

this.messageStore = response.json();
this.messageSubject.next(this.messageStore);

【讨论】：