Mysql 表数据未显示在使用 Nodejs 的 Angular 材料表上答案

【问题标题】：Mysql table data is not displaying on Angular material table using NodejsMysql 表数据未显示在使用 Nodejs 的 Angular 材料表上
【发布时间】：2020-07-02 10:22:40
【问题描述】：

HTML 文件

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <ng-container matColumnDef="stud_id">
    <th mat-header-cell *matHeaderCellDef> Stud_id </th>
    <td mat-cell *matCellDef="let element"> {{element.stud_id}} </td>
  </ng-container>

  <ng-container matColumnDef="stud_app_date">
    <th mat-header-cell *matHeaderCellDef> Date </th>
    <td mat-cell *matCellDef="let element"> {{element.stud_app_date | date}} </td>
  </ng-container>

  <ng-container matColumnDef="stud_first_name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.stud_first_name}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

**component file**

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import {student} from '../_interface/stud.model';
import { RegistrationService } from '../../../registration.service';

@Component({
  selector: 'app-get-stud',
  templateUrl: './get-stud.component.html',
  styleUrls: ['./get-stud.component.css']
})
export class GetStudComponent implements OnInit {

 public displayedColumns = ['id', 'stud_id', 'stud_app_date','stud_first_name'];

  public dataSource = new MatTableDataSource<student>();

  constructor(private _registrationService : RegistrationService) { }

  ngOnInit() : void {
    this.getAllStudents();    
  }

  public getAllStudents = () => {
    this._registrationService.registerGetStud()
    .subscribe(res => {
      this.dataSource.data = res as student[],
      response => console.log('Success!',response),
              error => console.error('Error!',error);
              console.log(this.dataSource.data);     
    })
  }
}

**interface**

export interface student{
    id: number;
    stud_id: string;
    stud_app_date: Date;
    stud_first_name: string;
  }

未检查的 runtime.lastError：消息端口在收到响应之前关闭。

我必须使用node js api在角度材料表中显示mysql表数据..但它没有显示任何数据...... 然后我使用邮递员检查了节点js api，甚至我检查了控制台日志..但是数据都显示在两者上......

【问题讨论】：

标签： mysql node.js angular express postman

【解决方案1】：

尝试通过添加更改检测器来呈现更改

首先，你需要在构造函数中注入它

 constructor(private readonly changeDetectorRef: ChangeDetectorRef, private _registrationService : RegistrationService)

然后你需要在添加数据后添加markforcheck，如下所示

  public getAllStudents = () => {
    this._registrationService.registerGetStud()
    .subscribe(res => {
      this.dataSource.data = res as student[]
      this.changeDetectorRef.markForCheck();   
    })
  }

【讨论】：

【解决方案2】：

component file

public getAllStudents = () => {
    this._registrationService.registerGetStud()
    .subscribe(res => {
      console.log(res),
      this.dataSource.data = res.response as student[],
      response => console.log('Success!',response),
              error => console.error('Error!',error);
              console.log(this.dataSource.data);     
    })
  }

实际上，我在响应中发送结果（在节点 js 中）...所以，在组件文件中添加响应以及在 html 文件中添加数据...现在它工作正常...就像

this.dataSource.data = res.response as student[],

{"status":200,"response":[{"id":1,"stud_id":"STUDENT_ID_0",".......

html

<table mat-table [dataSource]="dataSource.data".....

非常感谢 Atresh Kulkarni 的关心

【讨论】：