Recently, I decided to try using Angular Material Data table in my project. With some tweaks, I was able to successfully load the table header, however, I encountered an issue where the data was not displaying as expected. Upon checking the console log, the only message displayed was:
Observable -> MapOperator -> thisArg: undefined
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { AngularFirestore } from '@angular/fire/firestore';
@Component({
selector: 'app-tasks',
templateUrl: './tasks.component.html',
styleUrls: ['./tasks.component.scss']
})
export class TasksComponent implements OnInit {
tasks: Observable<any[]>;
displayedColumns = ['description', 'note'];
dataSource: MatTableDataSource<Tasks>;
constructor(private db: AngularFirestore) {}
ngOnInit() {
this.tasks = this.db
.collection('tasks')
.snapshotChanges()
.pipe(
map(actions => {
return actions.map(a => {
const data = a.payload.doc.data() as Tasks;
const id = a.payload.doc.id;
return { id, ...data };
});
})
);
console.log(this.tasks);
return this.tasks;
}
}
export interface Tasks {
description: string;
note: string;
}
Below is the snippet of HTML code that corresponds to the mentioned TS file:
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="description">
<mat-header-cell *matHeaderCellDef> description </mat-header-cell>
<mat-cell *matCellDef="let task">{{task.description}}</mat-cell>
</ng-container>
<ng-container matColumnDef="note">
<mat-header-cell *matHeaderCellDef> note </mat-header-cell>
<mat-cell *matCellDef="let task">{{task.note}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
Currently, I am working with Angular 7 along with the latest package versions. Despite having records in the database, I can't seem to figure out why the data isn't appearing on the Angular Material Data table. Any ideas on what might be causing this issue?