Observable - 收听EventEmitter并发出初始

Question

我目前正试图实现Angular Material Library中的表格。

我需要包括分页&排序，所以我跟着提供的示例“表与排序” & “表与分页”。

我有不同之处在于使用角度提供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端点，所以没有这种行为。

因此，显示的表是空的，直到发出分页或排序事件。

如何intially触发用户（表）最初加载数据？

---

我很新的给JavaScript &的Rx，所以我已经提前道歉，如果这是一个愚蠢的问题:)

Answer 1

我自己找到了解决方案。

---

问题是不是该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 { 
    } 
} 

Answer 2

您已经创建了可观察到的是目前的冷，因为它没有被认购至。您应该能够通过执行以下操作来订阅观察值。

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(); 
    }