angular - 使用 REST API 时 mat-table 数据源不起作用

Question

我无法将数据放入 Material 表中。

我制作了一个 Block 模型，其中包含 id、date 等字段。data.service 在哪里API 调用是，函数 getAllBlock() 返回 block 。我在 app.component.html 中尝试过，它可以工作。

document-list.component.ts

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { DataService } from '../data.service';
import { Block } from '../models/block.model';

@Component({
    selector: 'app-document-list',
    templateUrl: './document-list.component.html',
    styleUrls: ['./document-list.component.sass']
})
export class DocumentListComponent implements OnInit {
    blocks: Block[];
    //DataSource and columns for DataTable
    displayedColumns: string[] = ['Id', 'Date', 'Data', 'Hash', 'PreviousHash'];
    dataSource = new MatTableDataSource<Block>(this.blocks);

    //Filter (search)
    applyFilter(filterValue: string) {
        this.dataSource.filter = filterValue.trim().toLowerCase();
    }

    constructor(private dataService: DataService) { }

    ngOnInit(){
        return this.dataService.getAllBlock()
        .subscribe(data => this.blocks = data);
    }
}

document-list.component.html

<div class="content-table">
    <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>

    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
        <!-- ID Column -->
        <ng-container matColumnDef="Id">
            <th mat-header-cell *matHeaderCellDef>ID</th>
            <td mat-cell *matCellDef="let element"> {{element.Id}} </td>
        </ng-container>

        <!-- Date Column -->
        <ng-container matColumnDef="Date">
            <th mat-header-cell *matHeaderCellDef>Timestamp</th>
            <td mat-cell *matCellDef="let element"> {{element.Date}} </td>
        </ng-container>

        <!-- Data Column -->
        <ng-container matColumnDef="Data">
            <th mat-header-cell *matHeaderCellDef>Data</th>
            <td mat-cell *matCellDef="let element"> {{element.Data}} </td>
        </ng-container>

        <!-- Hash Column -->
        <ng-container matColumnDef="Hash">
            <th mat-header-cell *matHeaderCellDef>Hash</th>
            <td mat-cell *matCellDef="let element"> {{element.Hash}} </td>
        </ng-container>

        <!-- Previous Hash -->
        <ng-container matColumnDef="PreviousHash">
            <th mat-header-cell *matHeaderCellDef>PrevHash</th>
            <td mat-cell *matCellDef="let element"> {{element.PreviousHash}} </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>

我不知道如何向表中插入数据。我所做的有什么问题或问题出在哪里？

Answer 1

您正在处理异步数据，所以最初 this.blocks 是 undefined。您需要在订阅 getAllBlock() 之后定义 this.blocks 后创建 dataSource。在这里使用 return 也没有意义，因为您只是从 subscribe 方法获取数据。所以只需简单地调用 getAllBlock()。

您的代码现在应该是这样的。

dataSource: MatTableDataSource<Block>;

ngOnInit() {
    this.dataService.getAllBlock().subscribe(data => {
        this.blocks = data
        this.dataSource = new MatTableDataSource<Block>(this.blocks);
    });
}