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

Posted 2023-02-23

【中文标题】使用 REST API 时 mat-table 数据源不起作用

【英文标题】：mat-table dataSource doesn't work when using REST API

【发布时间】：2020-01-25 09:48:25

【问题描述】：

我无法将数据放入材料表中。

我创建了一个 Block 模型，其中包含 id、date 等字段。data.service 是 API 调用所在，函数 getAllBlock() 返回块。我在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>

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

【问题讨论】：

用这个答案试试它的类似问题***.com/questions/54575692/…

【参考方案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);
    );

【讨论】：

这个答案帮助我解决了我的问题。我花了几个小时才弄清楚。谢谢！

它对我有用