Question

我正在使用角度材料md-table来显示来自服务的数据。我的数据源订阅了服务以观察和获取我的数据源数据库的数据。但这不符合预期。我的数据源数据总是空数组，但我的服务是从API获取数据。请查看我的代码，让我知道为什么我的数据源数据在服务返回数据时没有检测到。

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>

Answer 1

在我的头脑中断了2天后，我意识到这不是订阅问题。我必须将<md-header-cell *cdkCellDef>Summary Name</md-header-cell>替换为<md-header-cell *cdkHeaderCellDef>Summary Name</md-header-cell>

MD-Table数据源数据为空数组

1 个答案: