如何通过Angular中的observable从服务中异步加载元素时将元素添加到列表中？

Question

在我的页面中，我有两个 ngFor 对象列表。一个列表是分配的成员，另一个是可分配的成员。两者都由以下模式显示。

<ng-container *ngIf="available$ | async as available">
  <div *ngFor="let item of available">
    <span (click)="assign(item)"</span>{{item.name}}
  </div>
</ng-container>

this.available$ = this.service.getMembers(false)
    .pipe(
      map(__ => ...), ... );

当我单击可分配成员时，我希望它从列表中消失并出现在另一个列表中。我想知道如何在不显式运行 subscribe(...) 并分配给列表的情况下实现这一目标。

一种方法是将内容保存到服务器，然后重新加载数据，但这似乎是一个巨大的矫枉过正。另一种选择是拥有本地的、不可观察的列表并对其进行管理。但是，我有点喜欢 async 管道，并且希望将组件代码保持在最低限度。 （另外，我已经根据页面中的管道设置了整个加载/失败的 GUI，所以重写工作量很大。）

Answer 1

不确定我的问题是否正确，但让我用伪代码试一试

import {merge, of, from, ...} from 'rxjs/operators';

assign(item){
 this.assigned = merge(this.assigned, of(item)); // add to list
 this.available = this.available.pipe(map(x => x.filter(y => y.id != item.id)); //remove from list
}

如果您可能想要实施 Ivan 提供的 combileLatest 解决方案，这里有一些伪代码如何从列表中过滤掉已删除的项目：

this.available$ = this.service.getMembers(false)
    .pipe(
      map(__ => ...),
      combineLatest(newMember.pipe(map(delItem => {action:"del", item = delItem}))
      filter(x => x[action] != 'del')));

这样的？

Answer 2

据我了解，您想要的是将您的可观察服务与您的分配功能的输出结合起来，而不必使用订阅。我建议您在您的班级中创建一个主题$newMember，该主题将发出您因分配功能而拥有的新成员的值。此后，您可以执行类似

的操作

this.available$ = combineLatest(this.service.getMembers(false), newMember$).pipe(map(...));

在演示中，您可以找到以下内容：

    this.repos = combineLatest(
  this.http.get(this.path),
  this.itemObs.asObservable()
).pipe(
  map(([req, action]) => {
    switch (action.operation) {
      case "add": {

        return;
      }
      case "remove": {
        this.newReps = this.newReps.filter(item => item.id !== action.id);
        return this.newReps;
      }
      default: {
        this.newReps = req["items"];
        return this.newReps;
      }
    }
  })
);

并且您的订阅将使用异步管道保持不变。

这是一个 Stackblitz demo

如果您想了解不同的运算符，现在需要查看 rxjs 文档。

merge - 输出 Observable 仅在所有输入 Observable 完成后才完成。您每次都必须重新触发您的请求。

combineLatest - 每当其中一个输入有新值时，将为所有输入发出最新值的投影。

此外，至少有 15 家运营商对行为略有不同的两个或多个流进行这种合并。您只需要确保选择最适合您的情况。