I am currently working on an Angular Material project to enhance my skills in Angular Material.
One challenge I am facing is trying to retrieve data from local storage, which was previously saved in a form, and display it using mat-table. However, the rendering process is not functioning correctly.
The specific error message that I encounter is:
ERROR Error: "Could not find column with id "name"."export interface Rec {
name: string;
cert: string;
cgpa: number;
}
const record: Rec[] = [] ;
// @title Dialog Overview
@Component({
selector: 'app-modal',
templateUrl: 'modal.component.html',
styleUrls: ['modal.component.scss'],
})
export class ModalComponent implements OnInit {
constructor(public dialog: MatDialog) {}
recs: Rec[] = [];
test() {
record.length = 0;
if (localStorage.reg) {
const reg = JSON.parse(localStorage.getItem('reg'));
// Retrieving data from two arrays into one array from localStorage
for (let index = 0; index < reg.length; index++) {
const pat = JSON.parse(localStorage.getItem(reg[index]));
const patQ = JSON.parse(localStorage.getItem(reg[index] + 'Q'));
const data = {
name: pat.sal + ' ' + pat.fname + ' ' + pat.lname,
cert: patQ.cert1,
cgpa: patQ.cgpa1,
};
record.push(data);
}
this.recs = record;
}
console.log(record);
}
ngOnInit() {
this.test();
console.log(this.recs);
}
openDialog() {
const dialogRef = this.dialog.open(Modal);
}
}<!-- modal.component.html -->
<table mat-table #table [dataSource]="recs">
<ng-container cdkColumnDef="name">
<th mat-header-cell *cdkHeaderCellDef> Name </th>
<td mat-cell *cdkCellDef="let row"> {{row.name}} </td>
</ng-container>
<ng-container cdkColumnDef="cert">
<th mat-header-cell *cdkHeaderCellDef> Certification </th>
<td mat-cell *cdkCellDef="let row"> {{row.cert}} </td>
</ng-container>
<ng-container cdkColumnDef="cgpa">
<th mat-header-cell *cdkHeaderCellDef> C/GPA </th>
<td mat-cell *cdkCellDef="let row"> {{row.cgpa}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['name', 'cert', 'cgpa']"></tr>
<tr mat-row *matRowDef="let row; columns: ['name', 'cert', 'cgpa'];"></tr>
</table>