Ceci est mon code sur un projet de matériau angulaire que je fais pour apprendre le matériau angulaire.

Le problème est que j'essaie de prendre des données du stockage local enregistrées plus tôt dans un formulaire et de les rendre via mat-table. Mais il ne le rend pas correctement.

L'erreur: ERROR Error: "Could not find column with id "name"." Clairement, j'ai l'attribut de colonne de nom comme j'ai inclus dans l'objet. Je ne comprends pas pourquoi ce problème se produit.

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>
0
Anup K. Tarafder 27 janv. 2019 à 12:43

3 réponses

Meilleure réponse

J'ai trouvé ma propre solution après quelques heures.

Remplacement de «cdk» par «mat» sur chaque ligne du fichier HTML. Le tableau était parfaitement rendu. * matHeaderCellDef à * cdkHeaderCellDef

1
Anup K. Tarafder 18 juin 2019 à 09:11

Je ne vois pas de problème dans la dénomination des attributs de colonne. Mais essayez les modifications ci-dessous et faites-moi savoir qu'une erreur existe toujours.

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);
        }
    }
}
0
Sudarshana Dayananda 27 janv. 2019 à 11:45

Je ferais quelque chose comme ça:

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

0
Prashant Pimpale 27 janv. 2019 à 12:53