Angular 4 - 行爲可觀察結果主題

Question

我使用角度4和材質設計編寫表格，並且希望將數據從服務綁定到表格。我的服務使用http從服務器獲取數據，並且therfore返回Promise或Observable。如何將Observable或Promise方法的結果賦值給變量dataChange的BehaviorSubject <>？

import { Component, OnInit, ElementRef, ViewEncapsulation, ViewChild } from '@angular/core'; 
import { DataSource } from '@angular/cdk'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { Observable } from 'rxjs/Observable'; 
import { MdPaginator, MdSort } from '@angular/material'; 
import 'rxjs/add/operator/startWith'; 
import 'rxjs/add/observable/merge'; 
import 'rxjs/add/operator/map'; 
declare let d3: any; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 


export class AppComponent implements OnInit { 

    displayedColumns = ['shiftDate', 'swipeIn', 'swipeOut', 'duration', 'status']; 
    exampleDatabase = new ExampleDatabase(); 
    dataSource: ExampleDataSource | null; 

    @ViewChild(MdPaginator) paginator: MdPaginator; 
    @ViewChild(MdSort) sort: MdSort; 

    ngOnInit() { 
    this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator, this.sort); 
    } 
} 

export interface attendanceData { 
    shiftDate: string; 
    swipeIn: string; 
    swipeOut: string; 
    duration: string; 
    status: string; 
} 


/** An example database that the data source uses to retrieve data for the table. */ 
export class ExampleDatabase { 
    /** Stream that emits whenever the data has been modified. */ 
    dataChange: BehaviorSubject<attendanceData[]> = new BehaviorSubject<attendanceData[]>([]); 
    get data(): attendanceData[] { 

    let data = [ 
     { 
     "shiftDate": "17-July-2017", 
     "swipeIn": "10:00 AM", 
     "swipeOut": "06:00 PM", 
     "duration": "8 Hours", 
     "status": "PRESENT" 

     }, 
     { 
     "shiftDate": "16-July-2017", 
     "swipeIn": "9:00 AM", 
     "swipeOut": "5:00 AM", 
     "duration": "7 Hours", 
     "status": "PRESENT" 
     } 

    ]; 

    return data; 
    } 

    constructor() { 

    this.dataChange.next(this.data); 
    } 

} 

export class ExampleDataSource extends DataSource<any> { 
    _filterChange = new BehaviorSubject(''); 
    get filter(): string { return this._filterChange.value; } 
    set filter(filter: string) { this._filterChange.next(filter); } 

    constructor(private _exampleDatabase: ExampleDatabase, private _paginator: MdPaginator, private _sort: MdSort) { 
    super(); 
    } 

    /** Connect function called by the table to retrieve one stream containing the data to render. */ 
    connect(): Observable<attendanceData[]> { 
    const displayDataChanges = [ 
     this._exampleDatabase.dataChange, 
     this._paginator.page, 
     this._sort.mdSortChange 
    ]; 

    return Observable.merge(...displayDataChanges).map(() => { 
     // const data = this._exampleDatabase.data.slice(); 
     const data = this.getSortedData(); 
     // Grab the page's slice of data. 
     const startIndex = this._paginator.pageIndex * this._paginator.pageSize; 
     return data.splice(startIndex, this._paginator.pageSize); 
    }); 
    } 

    disconnect() { } 

    getSortedData(): attendanceData[] { 
    const data = this._exampleDatabase.data.slice(); 
    if (!this._sort.active || this._sort.direction == '') { return data; } 

    return data.sort((a, b) => { 
     let propertyA: number | string = ''; 
     let propertyB: number | string = ''; 

     switch (this._sort.active) { 
     case 'shiftDate': [propertyA, propertyB] = [a.shiftDate, b.shiftDate]; break; 
     case 'swipeIn': [propertyA, propertyB] = [a.swipeIn, b.swipeIn]; break; 
     case 'swipeOut': [propertyA, propertyB] = [a.swipeOut, b.swipeOut]; break; 
     case 'duration': [propertyA, propertyB] = [a.duration, b.duration]; break; 
     } 

     let valueA = isNaN(+propertyA) ? propertyA : +propertyA; 
     let valueB = isNaN(+propertyB) ? propertyB : +propertyB; 

     return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : -1); 
    }); 
    } 
} 

Answer 1

主題可以作爲觀察員行動，所以你可以簡單地把它subscribe到觀察到：

dataChange: BehaviorSubject<attendanceData[]> = new BehaviorSubject<attendanceData[]>([]); 

observable.subscribe(this.dataChange) 

你並不需要調用主題next你做的方式：

this.myService.getObjects().subscribe(res => this.dataChange.next(res)) 

它會自動調用。正如我所展示的，只訂閱該主題就足夠了。