如何在新的 observable 发出值之前显示前一个 observable 的数据

Question

在我的 html 中，我使用异步管道来订阅 observable，如下所示。

<button  (click)="getData(1)" >getUser1</button>
<button style="margin:50px;" (click)="getData(2)" >getUser2</button>
<div>------------------------------------------</div>
<div *ngIf="userData$ |async as user">
data is{{  user | json}}</div>

每当用户点击按钮 1 或 2 时，这个 userData$ 可观察对象就会变成新的。

  getData(id) {

   this.userData$ = this.getDataFromBackend(id);
  }

 getDataFromBackend(id) {
    //delay added to simulate network delay
    // fake backend call but i have to use real one in actual project
  return of(this.dataSource[id]).pipe(delay(1000));
  }

现在，每当用户从 user1 更改为 user2 时，都会分配新的 observable。并且由于这个新的 observable 需要一些时间来获取数据，所以它暂时显示为空。

我们可以做点什么，直到新的可观察数据没有返回，我们才能显示以前的数据。

  I can not user loader here meanwhile.
  I know i can do something like 
  let subject = new Subject();
  let userObservable$ = subject.asObservable()
  and use this observable in the html
  and the subscribe to these observable form getDataFromBackend() here in the class and from 
  subscription do the subject.next() and it will send the updated value
  but this does not seem the best way as it do the manual subscription in the component

下面是 stackblitz 的链接，显示了问题。

https://stackblitz.com/edit/angular-ivy-d9nsxu?file=src%2Fapp%2Fapp.component.ts

Answer 1

这是一种无需手动订阅的方法：

app.component.ts

export class AppComponent  {

  userData$ :Observable<any>;
  dataSource = {1:{user:'user1', id:1}, 2: {user:'user2', id:2}};

  private userSrc = new Subject<number>();

  ngOnInit () {
    this.userData$ = this.userSrc.pipe(
      startWith(1),
      switchMap(id => this.getDataFromBackend(id)),
    )
  }

  getData(id) {
    this.userSrc.next(id);
  }

  getDataFromBackend(id) {
    return of(this.dataSource[id]).pipe(delay(1000));
  }
}

StackBlitz.

Answer 2

我会使用以下两个选项之一：

选项 1

您在 DataSource（我猜是服务？）上创建另一个 Observable（loading$ 或 state$），它提供布尔指示是否正在加载，或者（甚至更好）“状态”（枚举) 能够指示它是否处于“初始状态”、“已加载”、“正在加载”等。

选项 2

您可以更改流经您的 userData$ Observable 的内容。我建议 Observable 将调解以下数据结构：

{
  user: { ... }, // Containing the user data that has been loaded
  state: "Loaded",
}

（当加载用户数据时），并且：

{
  user: { ... }, // Containing the previously loaded user's data
  state: "Loading",
}

（加载用户数据时）

好吧，老实说 - 我很可能会使用类似 redux 的状态管理系统，例如：

• NgRx：https://ngrx.io/
• NgXs：https://www.ngxs.io/
• 秋田：https://github.com/datorama/akita

但那是另一回事了

Answer 3

您可以在 *ngIf 块中添加一个 else 块。试试下面的

<div *ngIf="userData$ |async as user; else elseBlock">
  data is {{ user | json }}
</div>
<ng-template #elseBlock>
  Loading...
</ng-template>

我修改了你的Stackblitz

Answer 4

数据消失的原因是因为你立即用一个新的 observable 覆盖了userData$ 对象，它还没有返回结果。

也许您可以订阅getDataFromBackend 调用并在返回结果时覆盖 userData$：

  userData$ = new Subject();
  dataSource = {1:{user:'user1', id:1}, 2: {user:'user2', id:2}};

  getData(id) {
    this.getDataFromBackend(id).subscribe(res => this.userData$.next(res));
  }