Mysql table data is not displaying on Angular material table using Nodejs - mysql

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: The message port closed before a response was received.
I would have to display the mysql table data in angular material table using node js api.. but it is not displaying any data...
Then i checked the node js api using postman and even i checked the console log.. but data's are displaying on both...

Answer 1

Try this by adding change detector to render changes
first, u need to inject it in the constructor
constructor(private readonly changeDetectorRef: ChangeDetectorRef, private _registrationService : RegistrationService)
Then u need to add markforcheck after data added like below
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);
})
}
Actually, i am sending the result in response(in node js)...so, added the response in component file along with added the data in html file...now its working fine...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".....
Thank you so much Atresh Kulkarni for your concern