Question

我正在使用下面的TS代码通过Bootstrap表加载数据，我想在稍加提起后尝试使用Angular Material Data表。在这一点上，我只能加载表头，但是找不到如何显示数据。没有引发错误，我插入的控制台日志显示：

可观察-> MapOperator-> thisArg：未定义

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;

角度材料数据表-尝试加载数据

1 个答案: