时间戳

首页 > 解决方案 > 带有可观察字符串数组的角度垫表返回列标题错误

angular - 带有可观察字符串数组的角度垫表返回列标题错误

问题描述

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

我有一个从后端服务填充的字符串表，字符串的数量会随着时间的推移而增加。所以我有一个服务，它用字符串填充数组并将其作为可观察对象返回。该服务显示在这里：

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

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

谢谢.....

标签： angularobservablemat-table

解决方案

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

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

我已经创建了一个示例项目点击这里进行演示

推荐阅读