Javascript 向数据表插入数据时出错

伙计们，我是angular方面的新手，我想将我的nodeJs服务器数据插入Datatable，所以我遵循了Datatable组件的所有步骤，但数据源不知道模板的属性

错误类型错误：无法读取未定义的属性“Fname” 在DashboardComponent\uMat\uCell\u58\u模板上（dashboard.component.html:72）

我的html：

<mat-table  [dataSource]="dataSource">
                <ng-container matColumnDef = "Agent">
                    <mat-header-cell *matHeaderCellDef> Agent </mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{User_info.Fname}} </mat-cell>

                </ng-container>
                <ng-container matColumnDef = "cin">
                    <mat-header-cell *matHeaderCellDef> CIN </mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{User_info.CIN}} </mat-cell>

                </ng-container>
                    <ng-container matColumnDef = "email">
                    <mat-header-cell *matHeaderCellDef> E_mail </mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{User_info.email}} </mat-cell>

                </ng-container>
                <ng-container matColumnDef = "age">
                    <mat-header-cell *matHeaderCellDef> Age </mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{User_info.age}} </mat-cell>

                </ng-container>
                <ng-container matColumnDef = "role">
                    <mat-header-cell *matHeaderCellDef> Role </mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{User_info.Role}} </mat-cell>

                </ng-container>
                <mat-header-row *matHeaderRowDef="dispalyedColumns"></mat-header-row>
                <mat-row *matRowDef="let row; columns: dispalyedColumns"></mat-row>
            </mat-table>
        </div>

---

正如@Jacopo在评论中提到的： 确保将

User\u info

变量初始化为空数组

---

用户信息：用户信息[]=[]

同样在HTML模板中，在访问动态数据时，最好使用
User\u info？.property\u name
。因此，您的模板应如下所示：

<ng-container matColumnDef = "Agent">
                    <mat-header-cell *matHeaderCellDef> Agent </mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{User_info?.Fname}} </mat-cell>

 </ng-container> 


代理人
{{User_info？.Fname}}

为什么我的代码不起作用

由于JS是异步的，所以它不会等待任何IO请求完成。相反，它将继续执行下一行代码

由于您是从服务获取值，因此在服务返回数据之前，视图将被初始化。此时
User\u info
的值是
未定义的
，因为您尚未初始化它。
您必须初始化数组<代码>用户信息：用户信息[]=[]

此外，在html中，您应该使用

User\u info？.property\u name

，因此如果数据丢失，它不会抛出错误。

User\u info:User\u info[]=[]

解决了我的问题，但现在表是空的您的

User\u info

是一个

User\u info

数组。ps：你真的需要清理你的代码员，这是一个混乱。列表是空的，因为你没有订阅

方法
connect
。您也不会在网络选项卡中看到请求。也许这会帮助您：新建
User\u infoDataSource（this.CollectionService）.connect（）.subscribe（result=>this.dataSource=result；）}）
{{User\u info.Fname}}
应该是
{{User.Fname}}
import { Component, OnInit, NgModule } from '@angular/core';
import {  Router } from '@angular/router';
import { MatTableDataSource } from '@angular/material/table';
import { CollectionService } from '../collection.service';
import { Collection_info } from '../modules/Collection_info';
import { User_info } from '../modules/User_info';
import { formatDate } from '@angular/common';
import { Observable } from 'rxjs/Observable'
import { DataSource } from '@angular/cdk/collections'
import {MatTableModule} from '@angular/material/table';
import * as $ from "jquery";
import { DataTablesModule } from 'angular-datatables';
import 'rxjs/add/observable/of';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
  Collection_info: Collection_info[];
  User_info: User_info[];
  dataSource = new User_infoDataSource(this.CollectionService);
 dispalyedColumns = ['Agent','cin','email','age','role'];
  constructor(private CollectionService: CollectionService, private router: Router) { }//, private User_info: User_info

  ngOnInit() {
    }
export class User_infoDataSource extends DataSource<any>{
  constructor(private CollectionService: CollectionService){
  super();}
  connect(): Observable<User_info[]>{
    return this.CollectionService.getUsers();
  }
  disconnect(){}
}

export interface User_info{
    Fname: String;
    CIN: String;
    email: String;
    age: String;
    Role: String;
}

<ng-container matColumnDef = "Agent">
                    <mat-header-cell *matHeaderCellDef> Agent </mat-header-cell>
                    <mat-cell *matCellDef="let user"> {{User_info?.Fname}} </mat-cell>

 </ng-container>