Question

我目前正在尝试实施Angular Material Library中的表格。

我需要加入分页＆amp;排序，所以我按照提供的示例＆＃34;表格进行排序＆＃34; ＆amp; ＆＃34;表格与分页＆＃34; 。

我的不同之处在于使用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});
  }
}

的DataSource：

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＆amp; Rx，所以如果这是一个愚蠢的问题，我已提前道歉：）

Answer 1

您创建的Observable目前很冷，因为它没有被订阅。您应该能够通过执行以下操作来订阅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
    );

当启动和订阅组件中的observable时，重要的是要记住在组件被销毁后取消订阅Observable，否则它将保持热。为此，请将订阅设置为方法：

   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很冷，因为在调用Observable后，该表实际上已经订阅了connect()。

问题是返回的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 {
  }
}

可观察 - 收听EventEmitter＆amp;发出初始

2 个答案: