Это мой код в проекте углового материала, который я делаю, чтобы изучить 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.
Я не вижу проблемы в именовании атрибутов столбца. Но попробуйте ниже изменения и дайте мне знать, что ошибка все еще существует.
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);
}