Angular CLI & Material table

Question

请告诉我为什么我在 Material table 中看不到数据。我就是不明白。而数据实际上是。行数与实际数据量相对应，但table只是空的。

图片：

device.model.ts

export class DeviceModel {
  private _id: number;
  private _device: string;
  private _status: string;
  private _lastUpdate: Date;

  contructor(id?: number,
             device?: string,
             status?: string,
             lastUpdate?: Date) {
    this._id = id;
    this._device = device;
    this._status = status;
    this._lastUpdate = lastUpdate;
  }

  get id(): number {
    return this._id;
  }

  set id(value: number) {
    this._id = value;
  }

  get device(): string {
    return this._device;
  }

  set device(value: string) {
    this._device = value;
  }

  get status(): string {
    return this._status;
  }

  set status(value: string) {
    this._status = value;
  }

  get lastUpdate(): Date {
    return this._lastUpdate;
  }

  set lastUpdate(value: Date) {
    this._lastUpdate = value;
  }
}

device.service.ts

import {Injectable} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Observable, of} from "rxjs";
import {AppConfig} from "../../../config/app.config";
import {DeviceModel} from "./device.model";
import {LoggerService} from "../../../core/shared/logger.service";
import {catchError, tap} from "rxjs/operators";

@Injectable({
  providedIn: 'root'
})
export class DeviceService {

  private readonly deviceUrl: string;

  constructor(private httpClient: HttpClient) {
    this.deviceUrl = AppConfig.endpoints.device;
  }

  private static handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      LoggerService.log(`${operation} failed: ${error.message}`);

      if (error.status >= 500) {
        throw error;
      }

      return of(result as T);
    };
  }

  public getAllDevices(): Observable<DeviceModel[]> {
    return this.httpClient.get<DeviceModel[]>(this.deviceUrl)
      .pipe(
        tap(() => LoggerService.log(`fetched devices`)),
        catchError(DeviceService.handleError('getDevices', []))
      );
  }
}

设备-list.component.ts

import {Component, OnInit} from '@angular/core';
import {DeviceModel} from "../../shared/device.model";
import {DeviceService} from "../../shared/device.service";

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

export class DeviceListComponent implements OnInit {

  devices: DeviceModel[];
  displayedColumns: ['id', 'device', 'state', 'lastUpdate'];

  constructor(private deviceService: DeviceService) {
  }

  ngOnInit() {
    this.deviceService.getAllDevices().subscribe((devices: DeviceModel[]) => {
      this.devices = devices
    });
    console.log(this.devices);
  }

}

设备-list.components.html

  <!-- Table container-->
  <div class="table-container">
    <mat-table #deviceTable [dataSource]="devices">

      <!-- Id Column -->
      <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
        <mat-cell *matCellDef="let device">{{device.id}}</mat-cell>
      </ng-container>

      <!-- Device Column -->
      <ng-container matColumnDef="device">
        <mat-header-cell *matHeaderCellDef> Device </mat-header-cell>
        <mat-cell *matCellDef="let device">{{device.device}}</mat-cell>
      </ng-container>

      <!-- Status Column -->
      <ng-container matColumnDef="state">
        <mat-header-cell *matHeaderCellDef> State </mat-header-cell>
        <mat-cell *matCellDef="let device">{{device.state}}</mat-cell>
      </ng-container>

      <!-- Lst update Column -->
      <ng-container matColumnDef="lastUpdate">
        <mat-header-cell *matHeaderCellDef> Last update </mat-header-cell>
        <mat-cell *matCellDef="let device">{{device.lastUpdate}}</mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

    </mat-table>
  </div>
  <!-- Table container-->

如果你用普通的 html-table 显示结果 - 有数据。

图片：

<div>
    <table>
      <thead>
      <tr>
        <th>Id</th>
        <th>DeviceModel</th>
        <th>State</th>
        <th>Last update</th>
      </tr>
      </thead>

      <tbody>
      <tr *ngFor="let device of devices">
        <td>{{device.id}}</td>
        <td>{{device.device}}</td>
        <td>{{device.status}}</td>
        <td>{{device.lastUpdate}}</td>
      </tr>
      </tbody>
    </table>
  </div>

我怀疑我在DeviceService中的数据映射有误。但我就是不明白哪里出了问题。我还附上了浏览器控制台中日志的内容(chrome)。

Chrome 日志：

一般来说，你已经可以看出设备数组是未定义的。你能告诉我如何解决这个问题吗？

Answer 1

我设法解决了这个问题。我的主要错误 - 我使用普通数组作为 MaterialTable 的数据源，而我必须传递 MaterialTableDataSource 实例。另外，由于 headers 我使用了一个错误初始化的数组。

device-list.component.ts

import {Component, OnInit} from '@angular/core';
import {Device} from "../../shared/device.model";
import {DeviceService} from "../../shared/device.service";
import {MatTableDataSource} from "@angular/material";

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

export class DeviceListComponent implements OnInit {
  dataSource = new MatTableDataSource<Device>();
  displayedColumns: ReadonlyArray<string> = [
    'id',
    'device',
    'state',
    'lastUpdate'
  ];

  constructor(private deviceService: DeviceService) {
  }

  ngOnInit() {
    this.deviceService.getAllDevices().then((devices: Device[]) => {
      this.dataSource.data = devices;
    });
  }

}

Angular CLI & Material table

Angular CLI & Material table

angular-material

angular-cli-v6