Я пытаюсь сделать то, что мне показалось простым, но столкнулся с проблемой, которую не могу решить.
У меня есть таблица строк, которая заполняется из бэкэнд-службы, и число Строки могут увеличиваться со временем. Итак, у меня есть сервис, который заполняет массив строками и возвращает его как наблюдаемый. Сервис показан здесь:
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. Шаблон компонента находится здесь:
<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 данные в столбцах не отображаются, и я не получаю любые ошибки. Но данные действительно настроены как источник данных, как показано на консоли. Все правильные данные находятся в фильтрованных данных.
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
Я записываю массив устройств на консоль в компоненте, и данные там. Я добавил итератор ngFor в список после таблицы, и все записи в таблице отображаются. Итак, я знаю, что данные есть. Но что-то в моей настройке таблицы для использования источника данных должно быть неверным. 
Я следовал нескольким примерам использования mat-таблицы с наблюдаемыми, и мне кажется, что я все сделал правильно. Очевидно, что нет. Может ли кто-нибудь указать мне на ошибку моих путей?
Спасибо .....