Mat-table не отображает данные, сохраненные в файле ts, в массиве объектов

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

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

Ошибка: 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.info(record);
    }

    ngOnInit() {
        this.test();
        console.info(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>

🤔 А знаете ли вы, что...
Angular поддерживает разработку мобильных приложений с использованием фреймворка NativeScript.


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

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

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


Решено

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

Заменено «cdk» на «mat» в каждой строке HTML-файла. Таблица отрисована идеально. *matHeaderCellDef в *cdkHeaderCellDef