Таблица данных углового материала - Попытка загрузки данных

Question

Я использовал приведенный ниже код TS для загрузки данных в таблицу Bootstrap, и я хотел поэкспериментировать с таблицей Angular Material Data после небольшого подъема. В этот момент я просто мог загрузить заголовок таблицы, но не смог найти, как сделать так, чтобы данные отображались. Ошибка не выдана, журнал консоли, который я вставил, говорит:

Наблюдаемый -> 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;
}

Вот мой HTML:

<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>

Я использую Angular 7 с текущими версиями пакетов, а база данных содержит записи, так что я здесь не так делаю?

Answer 1

Вы должны попробовать этот код ...

    <mat-table class="highlight" #table [dataSource]="dataSource" matSort>
 <!-- Dynamic      -->
        <ng-container *ngFor="let col of displayedColumns" matColumnDef={{col}}>
          <mat-header-cell *matHeaderCellDef mat-sort-header>{{col.replace('_', ' ')| titlecase }} </mat-header-cell>
          <mat-cell *matCellDef="let Exception">
            <span>{{Exception[col]}}</span>
          </mat-cell>
        </ng-container>
 <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
      </mat-table>

TS

        import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';

/ * dataSource: MatTableDataSource; замените это на * /

dataSource = new MatTableDataSource();
             this.dataSource.data = this.Task;