Ошибка при вставке данных в datatable angular

Question

Ребята, я новичок в angular и хочу вставить данные сервера nodeJs в Datatable, поэтому я выполнил все шаги компонента с данными, но источник данных не знал свойства шаблона.

ОШИБКА TypeError: Невозможно прочитать свойство Fname of undefined в DashboardComponent_mat_cell_58_Template (dashboard.component. html: 72)

at executeTemplate (core.js:11930)


at refreshView (core.js:11777)


at refreshDynamicEmbeddedViews (core.js:13142)


at refreshView (core.js:11800)


at refreshComponent (core.js:13217)


at refreshChildComponents (core.js:11508)


at refreshView (core.js:11829)


at refreshDynamicEmbeddedViews (core.js:13142)


at refreshView (core.js:11800)

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

основной компонент:

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

Answer 1

Как отметил @Jacopo в комментариях: убедитесь, что вы инициализировали переменную User_info как пустой массив.

User_info: User_info[] = [];

Также в шаблоне HTML рекомендуется иметь User_info?.property_name при доступе к динамическим c данным. Ваш шаблон должен выглядеть следующим образом:

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

 </ng-container> 

Почему мой код не работает?

Поскольку JS асинхронный, он не ждет IO запрос, чтобы закончить. Вместо этого он продолжит выполнять следующую строку кодов.

Поскольку вы получаете значение из сервиса, представление инициализируется до того, как сервис вернет данные. И тогда значение User_info равно undefined, потому что вы его не инициализировали.