Angular Material Table - 异步数据源的问题

Question

我正在尝试使用从 AWS DynamoDB 异步加载的数据填充 Angular Material 表，但我能做的最好的事情是使用三个预期项目呈现表，这些项目都将每个单元格中的属性返回为“[object Object]”。

流程如下：

• 在 AllInvoicesComponent.ngOnInit() 处，执行 buildTable()，
• 等待 DataService.getItems('invoices')，
• 将数据源分配为新的 MatTableDataSource(AllInvoicesComponent.invoices)

'async' 管道对于table 的dataSource 属性也完全没有任何作用。

data.service.ts：

import { Injectable } from '@angular/core';
import * as aws from 'aws-sdk';
import { Observable } from 'rxjs';
import AuthService from '@app/services/auth.service';

@Injectable({
  providedIn: 'root'
})

export class DataService {

  dynamodb;
  docClient;

  constructor(private auth: AuthService) {
    aws.config.credentials = new aws.Credentials(auth.credentials.accessKeyId, auth.credentials.secretAccessKey, null);
    aws.config.update({
        region: 'eu-west-1'
    })

    this.dynamodb = new aws.DynamoDB();
    this.docClient = new aws.DynamoDB.DocumentClient();
  }

  async getItems(tableName) {
    const params = {
        TableName: tableName
    }

    return new Promise((resolve, reject) => {
        this.dynamodb.scan(params, (err, data) => {
            if (err) {
                reject(err);
            } else {
                resolve(data.Items);
            }
        })
    })
  }
}

all-invoices.component.ts：

import { Component, OnInit, ViewChild } from '@angular/core';
import { Observable, from } from 'rxjs';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';

import Invoice from '../invoice.interface';
import { DataService } from '../../services/data/data.service';

@Component({
  selector: 'app-all-invoices',
  templateUrl: './all-invoices.component.html',
  styleUrls: ['./all-invoices.component.scss']
})

export class AllInvoicesComponent implements OnInit {

  invoices;

  dataSource: MatTableDataSource<any>;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  tableColumns = [
    'number',
    'reference'
  ]

  constructor(private database: DataService) {

  }

  ngOnInit() {
    this.buildTable();
  }

  async buildTable() {
    try {
        this.invoices = await this.database.getItems('invoices');
        this.dataSource = new MatTableDataSource(this.invoices);
    } catch(err) {
        console.error(`Error retrieving invoices: ${err.Message}`);
        // TODO:
    }
  }

}

all-invoices.component.html：

<p>All Invoices</p>

<br>

<div class="spinner-container" *ngIf="dataSource.loading$ | async">
  <mat-spinner></mat-spinner>
</div>

<table mat-table [dataSource]="dataSource" matSort>

  <ng-container matColumnDef="number">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Number</th>
    <td mat-cell *matCellDef="let invoice">{{invoice.number}}</td>
  </ng-container>

  <ng-container matColumnDef="reference">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Reference</th>
    <td mat-cell *matCellDef="let invoice">{{invoice.reference}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: tableColumns">

</table>

<mat-paginator [length]="dataSource.length" [pageSize]="25" [pageSizeOptions]="[5, 10, 25, 50]"></mat-paginator>

Answer 1

您将new MatTableDataSource(this.invoices); 分配给this.dataSource.data，但数据对象只是原始数据。因此，只需将您的代码修复为

this.dataSource = new MatTableDataSource(this.invoices);

你应该很好。

提示： MatTable 数据源不必是 MatTableDataSource 元素。您可以将原始数据传递给 [dataSource] 属性。