angular mat-table with observable string array returning column header 错误

Question

我正在尝试做我认为很简单的事情，但运行遇到了我无法解决的问题。

我有一个 table 从后端服务填充的字符串，并且字符串的数量会随着时间的推移而增加。所以我有一个服务，用字符串填充一个数组，returns 它作为一个可观察的。此处显示服务：

import { Injectable } from '@angular/core';
import { ApiService } from './api.service';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DeviceManagerService {
  devicesInfo = null;
  deviceInfo = null;
  devices = [];

  constructor(private apiService: ApiService ) { 
    this.apiService.getDeviceStatus().subscribe((resp) => {
      this.devicesInfo = resp;
      console.log('DeviceManager: deviceInfo: ',this.devicesInfo);
      this.buildDeviceTable(resp);
      console.log('devices[]=', this.devices);
    }); 
  }

  buildDeviceTable(devicesInfo) {

    devicesInfo.record.forEach( device => {
      console.log('record.devid= ', device.devid);
      if ( this.devices.indexOf(device.devid) > -1) {
        //console.log('element ', device.devid, ' already in devices array');
      }
      else {
        this.devices.push({ device: device.devid });
        //console.log('added ', device.devid, ' to devices array');
      }

    })
  }

  getDevices(): Observable<string[]> {
    let data = new Observable<string[]>(observer => {
      observer.next(this.devices);
    });
    return data;
  }
}

我有一个组件，我想在使用 mat-table 时显示这 table 个设备。组件模板在这里：

<mat-table [dataSource]="deviceData">
    <ng-container matColumnDef="deviceID">
        <mat-header-cell *matHeaderCellDef>Device EUI</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.device}}</mat-cell>
    </ng-container>

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

<ul>
<li *ngFor="let device of deviceData.filteredData">{{device.device}}</li>
</ul>
</div>

组件本身在这里：

import { DeviceManagerService } from './../../services/device-manager.service';
import { Component, OnInit } from '@angular/core';
import { MatTableModule, MatTableDataSource } from '@angular/material';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-devices',
  templateUrl: './devices.component.html',
  styleUrls: ['./devices.component.css']
})
export class DevicesComponent implements OnInit {
  displayedColumns: string[] = ['deviceID'];
  devices = null;
  deviceData = null;

  constructor(private deviceManager: DeviceManagerService) {
    this.deviceManager.getDevices().subscribe( devTable => {
      this.devices = devTable;
    });   
   }

  ngOnInit() {
    this.deviceData = new MatTableDataSource<string[]>(this.devices);
    console.log('devicessComponent: ', this.deviceData); 
  }

}

对于 mat-table，列中没有显示任何数据，我也没有收到任何错误。但数据确实设置为数据源，如控制台所示。所有正确的数据都在filteredData下找到。

MatTableDataSource {_renderData: BehaviorSubject, _filter: BehaviorSubject, _internalPageChanges: Subject, _renderChangesSubscription: Subscriber, sortingDataAccessor: ƒ, …}
   data: (...)
   filter: (...)
   sort: (...)
   paginator: (...)
   _renderData: BehaviorSubject {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
_filter: BehaviorSubject {_isScalar: false, observers: Array(1), closed: false, 
   isStopped: false, hasError: false, …}
   _internalPageChanges: Subject {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
   _renderChangesSubscription: Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …}
   sortingDataAccessor: (data, sortHeaderId) => {…}
   sortData: (data, sort) => {…}
   filterPredicate: (data, filter) => {…}
   _data: BehaviorSubject {_isScalar: false, observers: Array(1), closed: false, 
   isStopped: false, hasError: false, …}
   filteredData: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
   __proto__: DataSource

我将设备数组记录到组件中的控制台，数据就在那里。我在 table 之后的列表中添加了一个 ngFor 迭代器，并且显示了 table 的所有条目。所以我知道数据在那里。但是我使用数据源的 table 设置中的某些内容一定是不正确的。我遵循了几个将 mat-table 与 observable 结合使用的示例，在我看来我已经正确地完成了所有操作。显然我没有。有人可以指出我的方法错误吗？

谢谢......

Answer 1

您必须将 mat-header-cell 添加到您的 th

<mat-table [dataSource]="devices">
    <ng-container matColumnDef="deviceID">
        <th mat-header-cell *matHeaderCellDef>Device EUI</th>
        <td mat-cell *matCellDef="let devices">{{devices}}</td>
    </ng-container>

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

Answer 2

您需要将数据源转换为 MatTableDataSource，然后将其分配给数据源

devices=["test1","test2"]
dataSource2 = new MatTableDataSource<any>(this.devices);

我已经创建了一个示例项目Click here for demo

angular mat-table with observable string array returning column header 错误

angular mat-table with observable string array returning column header error

observable

angular

mat-table