Question

我想在添加新项目

后撤消我的可观察列表时遇到问题

我用这种方式在首次启动时将其反转

"{{ url("arquivo/store") }}/'+etapaanoid+'/'+trabalhoanoid+'"

在HTML中

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

@Pipe({
name: 'reverse'
})

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

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

此外，我查看了此链接[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);

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

1 个答案: