Mysql 表數據未顯示在使用 Nodejs 的 Angular 材料表上

Question

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：在收到響應之前消息端口已關閉。

我將不得不使用節點 js api 在角度材料表中顯示 mysql 表數據。顯示在兩個...

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

Answer 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 的關心