Мат-таблица не отображает данные, сохраненные в файле TS на массиве объектов

Question

Это мой код проекта по угловым материалам, который я делаю, чтобы изучать угловой материал.

Проблема в том, что я пытаюсь взять данные из локального хранилища, сохраненные ранее в форме, и обработать их с помощью mat-таблицы. Но это не правильно отображает его.

Ошибка: 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'));
            // Getting data from two array to one from localstorafe
            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>

Answer 1

Я бы сделал что-то вроде этого:

var data = localStorage.getItem('data'); // Get the data first
if (data) { // If data is available then parse it and assgined as `MatTableDataSource`
  var parsedData = JSON.parse(localStorage.getItem('data'));
  this.recs = new MatTableDataSource(parsedData);
}
else { // Otherwise set first and then use
  localStorage.setItem('data', JSON.stringify(ELEMENT_DATA));
  var parsedData = JSON.parse(localStorage.getItem('data'));
  this.recs = new MatTableDataSource(parsedData);
}

Stackblitz

Answer 2

Я нашел свое решение через несколько часов.

Заменил 'cdk' на 'mat' в каждой строке в файле HTML. Стол был оформлен идеально. * matHeaderCellDef to * cdkHeaderCellDef

Answer 3

Я не вижу проблемы в атрибутах именования столбцов.Но попробуйте изменения ниже, и дайте мне знать, что ошибка все еще существует.

import { MatDialog, MatTableDataSource } from '@angular/material';

const record: any = [];

export class ModalComponent implements OnInit {
    constructor(public dialog: MatDialog) {}
    recs: any;
    test() {
        record.length = 0;
        if (localStorage.reg) {
            ...
            this.recs = new MatTableDataSource<Rec>(record);
        }
    }
}