Could someone tell me please what i'm doing wrong, i can't seem to get my data displayed on the tavle after being called from backend, though it is seen on the console
Ts
export class PatientsComponent implements OnInit {
patient: Patient [] = [];
public displayedColumns = ['id', 'fullname', 'tribe', 'age' ];
public dataSource = new MatTableDataSource<Patient>();
constructor(private userService:UserService) { }
ngOnInit(): void {
this.userService.getPatients().subscribe((res)=>{
console.log(res);
this.dataSource.data = res;
})
}
}
Html
<table mat-table [dataSource]="dataSource" >
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> Id </th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>
<ng-container matColumnDef="fullname">
<th mat-header-cell *matHeaderCellDef>First Name </th>
<td mat-cell *matCellDef="let element"> {{element.fullname}} </td>
</ng-container>
<ng-container matColumnDef="tribe">
<th mat-header-cell *matHeaderCellDef> Tribe </th>
<td mat-cell *matCellDef="let element"> {{element.tribe}} </td>
</ng-container>
<ng-container matColumnDef="age">
<th mat-header-cell *matHeaderCellDef>Age</th>
<td mat-cell *matCellDef="let element"> {{element.age}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
Interface
export interface Patient {
id: String,
fullname: String,
tribe : String,
age: String
}
AppMaterialModule
import {NgModule} from '@angular/core';
import {MatTableModule} from '@angular/material/table';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatInputModule} from '@angular/material/input';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatSortModule} from '@angular/material/sort';
@NgModule({
// since we're exporting these modules, add them to export
exports: [
MatTableModule,
MatSortModule,
MatProgressSpinnerModule,
MatInputModule,
MatPaginatorModule,
]
})
export class AppMaterialModule {}
app,module.ts
import { AppMaterialModule } from "./app.material-module";
@NgModule({
declarations: [
// ....
],
imports: [
// .........
AppMaterialModule,
],
// ...
})
export class AppModule { }
On page realoading i get an empty table that contains like hundred of empty rows andi can't just figure out why. Can somebody help me please
Try importing the modules directly in app.module.ts
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.