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

Posted 2023-02-22

【中文标题】Mysql 表数据未显示在使用 Nodejs 的 Angular 材料表上

【英文标题】：Mysql table data is not displaying on Angular material table using Nodejs

【发布时间】：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，甚至我检查了控制台日志..但是数据都显示在两者上......

【参考方案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 的关心