如何实时反转可观察列表 角度 2.

Question

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

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

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">

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

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

Answer 1

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

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

如果您只有客户端应用程序，我假设您只能使用.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 发布到服务器，服务器这样做：

messages.push(req.body);

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

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