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

Question

I'm trying to do what I thought was simple but have run into a problem I can't solve.

I have a table of strings that is populated from a backend service, and the number of strings can increase over time. So I have a service that populates an array with the strings and returns it as an observable. The service is shown here:

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

I have a component that I want to display this table of devices in using mat-table. The component template is here:

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

And the component itself is here:

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

}

For the mat-table, no data is displayed in the columns and I don't get any errors. But the data is indeed setup as a dataSource as shown on the console. All the correct data is found under the 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

I log the devices array to the console in the component and the data is there. I've added an ngFor iterator in a list after the table, and all the entries of the table are displayed. So I know the data is there. But something in my setup of the table to use the datasource must be incorrect. I have followed several examples of using mat-table with observable and to me it looks like I've done everything correctly. Obviously I haven't. Could someone point me to the error of my ways?

Thanks.....

Answer 1

You need to convert your datasource to MatTableDataSource then assign it to datasource

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

I have created a sample project Click here for demo

Answer 2

You must add mat-header-cell to your 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>