Mysql данные таблицы не отображаются в Angular таблице материалов с использованием Nodejs

Question

HTML file

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

Unchecked runtime.lastError: Порт сообщения закрыт до получения ответа.

Мне нужно было бы отобразить данные таблицы mysql в таблице материалов angular, используя node js api .. но она не отображает никаких данных ... Затем я проверил API node js, используя почтальон и даже я проверил журнал консоли ... но данные отображаются на обоих ...

Answer 1

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

На самом деле, я отправляю результат в ответе (в node js) ... итак, добавил ответ в файл компонента вместе с данными в html файле ... теперь он работает нормально. .. like

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

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

html

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

Большое спасибо Atre sh Kulkarni за вашу заботу

Answer 2

Попробуйте это, добавив детектор изменений для визуализации изменений

. Сначала вам нужно внедрить его в конструктор

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