Angular material (三)；材料表

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

图片：

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

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', []))
      );
  }
}

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);
  }

}

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;
    });
  }

}

设备.服务.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;
  }
}

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', []))
      );
  }
}

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);
  }

}

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;
    });
  }

}

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

身份证件
{{device.id}
装置
{{device.device}
陈述
{{device.state}
最后更新
{{device.lastUpdate}

如果在普通html表格中显示结果，则会显示数据

图片：

身份证件
设备模型
陈述
最后更新
{{device.id}
{{device.device}
{{device.status}
{{device.lastUpdate}

我怀疑我在DeviceService中的数据映射是错误的。但我就是不明白怎么了。我还将日志内容附加到浏览器控制台（chrome）中

Chrome日志：

通常，您已经可以看到设备数组未定义。

---

你能告诉我如何解决这个问题吗？

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

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

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', []))
      );
  }
}

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);
  }

}

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/core'导入{Component，OnInit}；
从“./../shared/Device.model”导入{Device}；
从“./../shared/device.service”导入{DeviceService}”；
从“@angular/material”导入{MatTableDataSource}；
@组成部分({
选择器：“应用程序设备”，
templateUrl:'./device list.component.html'，
样式URL:['./设备列表.component.scss']
})
导出类DeviceListComponent实现OnInit{
dataSource=新MatTableDataSource（）；
displayedColumns:ReadonlyArray=[
“id”，
“设备”，
“国家”，
“最新更新”
];
构造函数（专用设备服务：设备服务）{
}
恩戈尼尼特（）{
this.deviceService.getAllDevices（）。然后（（设备：设备[]））=>{
this.dataSource.data=设备；
});
}
}

是否执行此操作并在对象中查看数据？log（this.dataSource.data）；html看起来不错，所以开始从数据源向后工作。这是我用来帮助编码人员的设置：谢谢，你的例子对我来说很有用。兄弟，谢谢你把出错的地方和你如何纠正它包括进来。我不知道这一行也是重要的displayedColumns:ReadonlyArray。我把它做成了一个简单的数组。让它成为只读的Ray不知何故起了作用，但我仍然不明白。mattabledatasource系列也很重要。我很高兴它能帮助您）