错误类型错误：无法读取未定义的属性“数据”

Question

我是 Angular 和 mongodb 的新手。我正在尝试从 MongoDB 中提取数据并将其显示在 Angular Material Table 中。 但是我遇到了错误

“错误类型错误：无法读取未定义的属性‘数据’”

当我试图打开应用程序时，MongoDB 中的数据将无法加载。 我设法缩小与这条线有关的问题。

return this.myservice.GetList().subscribe(res => this.dataSource.data = res["0"]["data"]);
                                                                                ^^^^^^^^

提前致谢！

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



  ngOnInit() {

    return this.myservice.GetList().subscribe(res => this.dataSource.data = res["0"]["data"]);

  }

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

站点列表集合中的 MongoDB 数据

{
    "_id" : ObjectId("5ec4672e44f01dcae82c3dde"),
    "error" : "0",
    "num_rows" : 3,
    "data" : [ 
        {
            "S_NAME" : "SBOBETH",
            "S_ADD" : "sbobeth.com",
            "S_STATUS" : "UP"
        }, 
        {
            "S_NAME" : "GTRCASINO",
            "S_ADD" : "gtrcasino.com",
            "S_STATUS" : "DOWN"
        }, 
        {
            "S_NAME" : "SBOBETH",
            "S_ADD" : "sbobeth.com",
            "S_STATUS" : "DOWN"
        }, 
        {
            "S_NAME" : "GTRBETCLUB",
            "S_ADD" : "gtrbetclub.com",
            "S_STATUS" : "UP"
        }, 
        {
            "S_NAME" : "77UP",
            "S_ADD" : "77up.bet.com",
            "S_STATUS" : "UP"
        }, 
        {
            "S_NAME" : "DATABET88",
            "S_ADD" : "databet88.net",
            "S_STATUS" : "DOWN"
        }, 
        {
            "S_NAME" : "FAFA855",
            "S_ADD" : "fafa855.com",
            "S_STATUS" : "UP"
        }
    ]
}

backend.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse, HttpHeaders, HttpRequest  } from "@angular/common/http";
import { catchError, map, tap,  } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class BackendService {

  constructor(private _http: HttpClient) { }

  GetList() 
  {

    return this._http.get('http://localhost:3000/api/getList')

  }

  private handleError<T>(operation = 'operation', result?: T)
  {
    console.log("error");
    return null;
  }

  private log(message: string)
  {
    console.log("log");
  }

}

server.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
var mongoose = require('mongoose');
require('./db')                                                                         
const SLDBModel = require('./sldbreply_schema');                                        

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.urlencoded({ extended: true }))

app.use(function (req, res, next)
{
    res.setHeader('Access-Control-Allow-Origin','*');
    res.setHeader('Access-Control-Allow-Methods','GET, POST, PUT, DELETE');
    res.setHeader('Access-Control-Allow-Headers','content-type, x-access-token');
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
});

app.get('/api/getList', function(req, res){
    SLDBModel.find({},function(err,data){
        if(err)
        {
            res.send(err);
        }
        else
        {
            res.send(data);
        }
    });
})

app.listen(3000, ()=>
{
    console.log("SERVER IS ONLINE!");
})

在我尝试了 console.log(res);从评论中的建议首先检查我的“res”数据。

从 server.js 我尝试了 console.log(data);

他们都返回 [] 不确定这是什么意思 关于如何解决的任何建议？

Answer 1

尝试在您的服务器端也将数据转换为 Json

app.get('/api/getList', function(req, res){
SLDBModel.find({},function(err,data){
    if(err)
    {
        res.send(err);
    }
    else
    {
        res.send(data.toJSON());
    }
   });
})

也试试console.log(data)。如果是数组，请将res.send(data)替换为res.send(data.map(v => v.toJSON())

Answer 2

看来data 属性是对象的父级。在ngOnInit()中尝试以下操作

ngOnInit() {
  this.myservice.GetList().subscribe(
    res => { 
      this.dataSource.data = res['data'];
    },
    error => { 
      // always good practice to handle error in HTTP observables
    }
  );
}

Answer 3

在ngOnInit()里面替换

return this.myservice.GetList().subscribe(res => this.dataSource.data = res["0"]["data"]);

与

this.myservice.GetList().subscribe(res => {
        console.log(res); // Check your 'res' data first
        dataSource.data = res["0"]["data"];
    });

注意：控制台您的 res 以了解您的响应数据如何。