Angular CLI 和材料表

大家好。请告诉我为什么我不在材料表中显示数据。我完全无法理解。而且，还有数据，而且行数和实际数据量相对应，但表根本就是空的。

设备模型.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;
  }
}

设备服务.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', []))
      );
  }
}

设备列表.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);
  }

}

设备列表.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 表中显示 - 数据就在那里。

<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 中的 DeviceModel 中的数据映射在某种程度上是错误的。但我不知道出了什么问题。我还在控制台中附加了日志的内容。

一般来说，很明显我的设备数组是未定义的。请告诉我如何解决这种情况？

提前非常感谢大家。

PS：最近几天，我一直在学习 Angular，所以如果我有时会忽略相当明显的事情，我深表歉意。

我已经根据答案进行了调整。

谢谢，有帮助，现在可以了。