I am currently testing out the Angular Material table component, but I'm facing an issue where it's not displaying any data and showing the error:
Could not find column with id "id".
This is confusing to me because my data does have a row with the column id.
The in-memory data service provider code snippet is as follows:
import { Injectable } from '@angular/core';
import { InMemoryDbService, RequestInfo } from 'angular-in-memory-web-api'
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class Contact {
id!: string;
name!: string;
email!: string;
}
export class BackendService implements InMemoryDbService {
constructor() { }
createDb(reqInfo?: RequestInfo | undefined): {} | Observable<{}> | Promise<{}> {
let contacts = [
{ id: 1, name: 'Contact 1', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="385b57564c595b4c09785d55595154165b5755">[email protected]</a>' },
{ id: 2, name: 'Contact 2', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aac9c5c4decbc9de98eacfc7cbc3c684c9c5c7">[email protected]</a>' },
{ id: 3, name: 'Contact 3', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="284b47465c494b5c1b684d45494144064b4745">[email protected]</a>' },
{ id: 4, name: 'Contact 4', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34575b5a4055574000745159555d581a575b59">[email protected]</a>' }
];
return { contacts };
}
}
The component code section looks like this:
import { Component, OnInit, ViewChild } from '@angular/core';
import { ContactService } from '../contact.service';
import { firstValueFrom } from 'rxjs';
import { Contact } from '../backend.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
const COLUMNS_SCHEMA = [
{
key: "id",
type: "text",
label: "Id"
},
{
key: "name",
type: "text",
label: "Name"
},
{
key: "email",
type: "text",
label: "E-mail"
},
]
@Component({
selector: 'app-contact-list',
templateUrl: './contact-list.component.html',
styleUrl: './contact-list.component.css'
})
export class ContactListComponent implements OnInit {
@ViewChild('paginator') paginator!: MatPaginator;
@ViewChild(MatSort) sort!: MatSort;
dataSource!: MatTableDataSource<Contact>;
displayedColumns: string[] = COLUMNS_SCHEMA.map((col) => col.key);
columnsSchema: any = COLUMNS_SCHEMA;
contacts: any[] = [];
constructor(private contactService: ContactService) {
}
async ngOnInit(): Promise<void> {
const data: any = await firstValueFrom(this.contactService.getContacts());
console.log(data);
this.contacts = data;
this.dataSource = new MatTableDataSource(this.contacts);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
console.log(this.displayedColumns);
}
}
Finally, here is how my template is structured:
<mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
<ng-container matColumnDef="date">
<mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
<mat-cell *matCellDef="let contact">
<input type="text" matInput [value]="contact.id" readonly>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>