可观察-监听EventEmitter并发出初始声音

Question

我目前正在尝试从Angular Material Library中实现一个表。

我需要包括分页和排序，因此我遵循提供的示例“带排序的表”和“带分页的表” 。

我的区别是使用Angular提供的HttpClient从REST端点获取数据。

---

这是当前代码（简体）：

服务：

@Injectable()
export class DataService {
  constructor(private http: HttpClient) {
  }

  getData(page: number, size: number, sort: string): Observable<Data[]> {
    const params = new HttpParams()
      .set('page', String(page))
      .set('size', String(size))
      .set('sort', String(sort));
    return this.http.get<Data[]>('/api/v1/data', {params: params});
  }
}

数据源：

export class DataDataSource extends DataSource<Data> {

  constructor(private dataService: DataService, private sort: MdSort, private paginator: MdPaginator) {
    super();
  }

  connect(collectionViewer: CollectionViewer): Observable<Data[]> {
    const displayDataChanges = [
      this.sort.mdSortChange,
      this.paginator.page
    ];

    return Observable.merge(...displayDataChanges).flatMap(() => {
      let sortStr = this.sort.active + (this.sort.direction == 'asc' ? ',asc' : ',desc');
      return this.dataService.getData(this.paginator.pageIndex, this.paginator.pageSize, sortStr);
    });
  }

  disconnect(collectionViewer: CollectionViewer): void {
  }
}

---

实际问题

在该示例中，每当数据更改时，便使用Behaviour将Event发送给Observable 。 当我使用REST端点时，我没有这种行为。

因此，在发出分页或排序事件之前 ，显示的表为空 。

我如何最初触发订户（表）最初加载数据？

---

我对JavaScript和Rx非常陌生，所以如果这是一个愚蠢的问题，我已经提前道歉:)

Answer 1

您创建的Observable当前处于冷状态，因为尚未订阅。 通过执行以下操作，您应该可以订阅可观察的内容。

    Observable.merge(...displayDataChanges).flatMap(() => {
      let sortStr = this.sort.active + (this.sort.direction == 'asc' ? ',asc' : ',desc');
      return this.dataService.getData(this.paginator.pageIndex, this.paginator.pageSize, sortStr);
    }).subscribe(
      (result) => //do something,
      (err) => //do something
    );

在组件中启动和预订可观察对象时，重要的是要记住在组件被销毁后取消订阅该可观察对象，否则它将保持高温。 为此，将“订阅”设置为一种方法：

   subscription: Subsction;
   connect(collectionViewer: CollectionViewer): Observable<Data[]> {
     const displayDataChanges = [
       this.sort.mdSortChange,
       this.paginator.page
     ];

    this.subscription = Observable.merge(...displayDataChanges).flatMap(() => {
      let sortStr = this.sort.active + (this.sort.direction == 'asc' ? ',asc' : ',desc');
      return this.dataService.getData(this.paginator.pageIndex, this.paginator.pageSize, sortStr);
    });
   }

   ngOnDestroy() {
     this.subscription.unsubscribe();
   }

Answer 2

我自己找到了解决方案。

---

问题不是Observable很冷，因为表在调用connect()之后实际上已经预订了Observable 。

---

问题在于，返回的Observable当然不会发生任何事件，直到发生排序或分页为止（由于merge() ）。

---

解决方案是添加一个可以调用以刷新数据的触发器：

export class DataDataSource extends DataSource<Data> {

  private dataChange: EventEmitter<void> = new EventEmitter<void>();

  constructor(private dataService: DataService, private sort: MdSort, private paginator: MdPaginator) {
    super();
  }

  public refreshData(): void {
    this.dataChange.next(null);
  }

  connect(collectionViewer: CollectionViewer): Observable<Data[]> {
    const displayDataChanges = [
      this.sort.mdSortChange,
      this.paginator.page,
      this.dataChange
    ];

    return Observable.merge(...displayDataChanges).flatMap(() => {
      let sortStr = this.sort.active + (this.sort.direction == 'asc' ? ',asc' : ',desc');
      return this.dataService.getData(this.paginator.pageIndex, this.paginator.pageSize, sortStr);
    });
  }

  disconnect(collectionViewer: CollectionViewer): void {
  }
}