时间戳

首页 > 解决方案 > Angular 9 - BehaviorSubject 提供以前的价值

rxjs - Angular 9 - BehaviorSubject 提供以前的价值

问题描述

我正在尝试为获取数据并将数据分配给组件的通用方式提供解决方案。我正在玩 BehaviorSubject，因为我认为它是该工作的合适人选。这是一些代码：

服务：

public listSubject: BehaviorSubject<any[]>;

constructor(private service: someservice) {
   this.listSubject = new BehaviorSubject<any[]>([]);
}

public requestList(id: number) {
this.someservice.get('url')
.subscribe(data => {
  this.listSubject.next([data]);
});

}

public get list(): any[] {
  if (this.listSubject.value.length > 0) {
    return [this.projectListSubject.value];
  } else {
    return null;
  }
}

执行：

constructor(public service: AwaAlertsService) {
  // need full list first
  this.service.requestProjectList(1);
  this.list = this.service.projectList;
}

this.service.requestList(id);
this.list = this.service.list;

除了我得到以前的值外，它可以工作。

知道我在做什么错吗？

谢谢

标签： rxjsangular9

解决方案

至少在这个例子BehaviorSubject中是多余的，因为你可以简单地将列表分配给一个类似的属性: Array<any>，它会做同样的事情而没有rxjs.

但是，如果您将列表变成可观察的，那么BehaviorSubject就有意义了，因为现在它会在列表发生更改时发出通知，并且您可以在应用程序之间共享它。

constructor(private service: someservice) {
   this.listSubject = new BehaviorSubject<any[] | null>(null);
}

public get list$(): Observable<any[] | null> {
  return this.projectListSubject;
}

稍后在组件代码或模板中

this.doSomething = service.list$.pipe(
  // ....
);

<ng-container *ngIf="service.list$ | async as items">
  <ng-container *ngIf="items">
    <div *ngFor="let item of items"> {{ item }} </div>
  </ng-container>
</ng-container>

推荐阅读