Угловая таблица CLI & Material

Question

Скажите, пожалуйста, почему я не вижу данных в таблице материалов. Я просто не могу понять. И данные на самом деле. Количество строк соответствует фактическому объему данных, но таблица просто пуста.

Изображение:

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-таблице - есть данные.

Изображение:

<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 log:

В общем, вы уже можете видеть, что массив устройств не определен. Подскажите, пожалуйста, как я могу решить эту проблему?

Answer 1

Мне удалось решить эту проблему. Моя главная ошибка - я использовал обычный массив в качестве DataSource для MaterialTable, тогда как мне нужно было передать экземпляр MaterialTableDataSource. Также в качестве заголовков я использовал неправильно инициализированный массив.

устройство-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;
    });
  }

}