ERROR TypeError: Cannot read property 'length' of undefined. Using Angular Material Table and array of data from MongoDB

Question

我正在为我的大学项目做作业。当我尝试从 MongoDB 集合中获取数据数组时，我在尝试加载应用程序页面时遇到错误。

错误详情

ERROR TypeError: Cannot read property 'length' of undefined
    at MatTableDataSource._filterData (vendor.js:125690)
    at MapSubscriber.project (vendor.js:125647)
    at MapSubscriber._next (vendor.js:150670)
    at MapSubscriber.next (vendor.js:146175)
    at CombineLatestSubscriber.notifyNext (vendor.js:147035)
    at InnerSubscriber._next (vendor.js:145470)
    at InnerSubscriber.next (vendor.js:146175)
    at BehaviorSubject.next (vendor.js:145961)
    at BehaviorSubject.next (vendor.js:145442)
    at MatTableDataSource.set data [as data] (vendor.js:125571)

我试试console.log(res); tabledata.component.ts 来自 MongoDB 的数据看起来是正确的

console.log(res);

[{…}]
0:
error: "0"
list: Array(7)
0: {S_NAME: "SBOBETH", S_ADD: "sbobeth.com", S_STATUS: "UP"}
1: {S_NAME: "GTRCASINO", S_ADD: "gtrcasino.com", S_STATUS: "DOWN"}
2: {S_NAME: "SBOBETH", S_ADD: "sbobeth.com", S_STATUS: "DOWN"}
3: {S_NAME: "GTRBETCLUB", S_ADD: "gtrbetclub.com", S_STATUS: "UP"}
4: {S_NAME: "77UP", S_ADD: "77up.bet.com", S_STATUS: "UP"}
5: {S_NAME: "DATABET88", S_ADD: "databet88.net", S_STATUS: "DOWN"}
6: {S_NAME: "FAFA855", S_ADD: "fafa855.com", S_STATUS: "UP"}
length: 7
__proto__: Array(0)
num_rows: 3
_id: "5ec4672e44f01dcae82c3dde"
__proto__: Object
length: 1
__proto__: Array(0)

tabledata.component.ts

import {BackendService} from './../backend.service';
import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';

@Component({
  selector: 'tabledata',
  templateUrl: './tabledata.component.html',
  styleUrls: ['./tabledata.component.css']
})

export class TabledataComponent implements OnInit {
  displayedColumns = ['S_NAME', 'S_ADD', 'S_STATUS'];
  dataSource = new MatTableDataSource;

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;

  constructor(private myservice: BackendService) {
    this.dataSource.data = [];
  }

  ngOnInit() {
    this.myservice.GetList().subscribe(
      (res: any[][]) => { 
        this.dataSource.data = res["0"]["data"];
        console.log(res);
      },
      error => {
      }
    );
}

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}

不确定错误在哪里，所以任何见解将不胜感激。

Answer 1

关于您的数据源初始化：dataSource = new MatTableDataSource;

改为dataSource = new MatTableDataSource();，因为需要调用class定义的构造函数。它可能解释没有找到对数组的引用。

基于console.log(res)的结果：

[{…}]
0:
error: "0"
list: Array(7)
0: {S_NAME: "SBOBETH", S_ADD: "sbobeth.com", S_STATUS: "UP"}
1: {S_NAME: "GTRCASINO", S_ADD: "gtrcasino.com", S_STATUS: "DOWN"}
2: {S_NAME: "SBOBETH", S_ADD: "sbobeth.com", S_STATUS: "DOWN"}
3: {S_NAME: "GTRBETCLUB", S_ADD: "gtrbetclub.com", S_STATUS: "UP"}
4: {S_NAME: "77UP", S_ADD: "77up.bet.com", S_STATUS: "UP"}
5: {S_NAME: "DATABET88", S_ADD: "databet88.net", S_STATUS: "DOWN"}
6: {S_NAME: "FAFA855", S_ADD: "fafa855.com", S_STATUS: "UP"}
length: 7

您不能用 res["0"]["data"] 填充您的 dataSource.data，因为这意味着 res 是一个包含名为“0”的嵌套对象的对象，嵌套对象具有属性 "data" . 并且没有这样的东西。

如果目标是用数组

的内容填充 table，请尝试 this.dataSource.date = res.list

ERROR TypeError: Cannot read property 'length' of undefined. Using Angular Material Table and array of data from MongoDB

ERROR TypeError: Cannot read property 'length' of undefined. Using Angular Material Table and array of data from MongoDB

angular

mongodb

angular-material

angular-material-table