0
我正在使用角度材質md-table來顯示來自服務的數據。我的數據源訂閱了服務來觀察並獲取我的數據源數據庫的數據。但是這不能按預期工作。我的數據源數據始終是空數組，但我的服務正在從API中獲取數據。請查看我的代碼，並讓我知道爲什麼我的數據源數據在服務返回數據時未檢測到。MD-Table數據源數據爲空數組
import { Component, OnInit, ViewChild } from '@angular/core';
import { DataService } from '../core/services/data.service';
import { SummaryService } from './summary.service';
import { Summaries,SummaryDetails, SummaryDetailRequest, SummariessWithTotals } from "../models/datamodelsObj";
import { DataSource } from '@angular/cdk';
import { MdPaginator, DateAdapter, NativeDateAdapter } from '@angular/material';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-positionsummary',
templateUrl: './position-summary.component.html',
styleUrls: ['./position-summary.component.scss'],
providers: []
})
export class PositionSummaryComponent implements OnInit {
displayedColumns = ['SummaryName', 'ShortDesc', 'RegTime', 'ExpTime'];
psDatabase = new SummaryDatabase(this.dataService, this.psService);
dataSource: SummaryDataSource | any;@ViewChild(MdPaginator) paginator: MdPaginator;
constructor(private dataService: DataService, private pagi: MdPaginator, private psService: SummaryService) {
}
ngOnInit() {
this.psDatabase = new SummaryDatabase(this.dataService,this.psService);
this.dataSource = new SummaryDataSource(this.psDatabase, this.paginator);
console.log(this.dataSource);
}
}
export class SummaryDatabase {
summary: Summaries;
summaryDetailRequestObj: SummaryDetailRequest;
public dataChange: BehaviorSubject<SummaryDetails[]> = new BehaviorSubject<SummaryDetails[]>([]);
get data(): SummaryDetails[] { return this.dataChange.value }
constructor(private _dataService: DataService, private psService: SummaryService) {
this.getAllSummaryDetails()
}
getAllSummaryDetails() {
this.summaryDetailRequestObj.StartTime = "20170914";
this.summaryDetailRequestObj.NodeID =this._dataService.selectedGlobalSummaryId;
this.psService.getSummaryDetails(this.summaryDetailRequestObj).subscribe(data => this.dataChange.next(data));
}
}
export class SummaryDataSource extends DataSource<any> {
constructor(private _summaryDatabase: SummaryDatabase, private _paginator: MdPaginator) {
super();
}
connect(): Observable<SummaryDetails[]> {
const displayDataChanges = [
this._summaryDatabase.dataChange,
this._paginator.page
];
return Observable.merge(...displayDataChanges).map(() => {
const data = this._summaryDatabase.data.slice();
console.log(data);
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
return data.splice(startIndex, this._paginator.pageSize);
})
}
disconnect() { }
}
我的服務
export class SummaryService {
public actionUrl: string;
private headers: HttpHeaders;
constructor(private http: HttpClient, private configuration: Configuration) {
this.actionUrl = configuration.Server;
}
getSummaryDetails = (request: SummaryDetailRequest): Observable<SummaryDetails[]> => {
return this.http.post(this.actionUrl + '/details', request,{ headers: this.headers })
.map((data: SummariesWithTotals) => {
return data.Values;
});
}
}
我看來
<md-table #table [dataSource]="dataSource">
<ng-container cdkColumnDef="SummaryName">
<md-header-cell *cdkCellDef>Summary Name</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.Sum_Name}} </md-cell>
</ng-container>
<ng-container cdkColumnDef="ShortDesc">
<md-header-cell *cdkCellDef>Short Description</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.ShortDesc}} </md-cell>
</ng-container>
<ng-container cdkColumnDef="RegTime">
<md-header-cell *cdkCellDef>Registered Time</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.RegTime}} </md-cell>
</ng-container>
<ng-container cdkColumnDef="ExpTime">
<md-header-cell *cdkCellDef>Expiry Time</md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.ExpTime}} </md-cell>
</ng-container>
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
</md-table>
<md-paginator #paginator
[length]="psDatabase.data.length"
[pageIndex]="0"
[pageSize]="10"
[pageSizeOptions]="[5, 10, 25, 100]">
</md-paginator>