如何正确地将异步数据绑定到 Angular Material Table-html教程-PHP中文网

如何正确地将异步数据绑定到 Angular Material Table

DDD

发布： 2025-11-10 11:41:35

原创

394人浏览过

如何正确地将异步数据绑定到 Angular Material Table

本文详细阐述了在 angular 应用中，如何高效且正确地将异步获取的数据绑定到 `mattabledatasource`。我们将探讨常见的异步数据绑定陷阱，并提供一个推荐的解决方案，确保数据在加载完成后能顺利渲染到 angular material 表格中，同时涵盖分页、排序和过滤的配置。

1. Angular Material Table 数据源 (MatTableDataSource) 概述

MatTableDataSource 是 Angular Material 表格组件的核心，它负责管理表格的数据、提供过滤、排序和分页等功能。要使 mat-table 正常工作，必须为其 [dataSource] 属性提供一个 MatTableDataSource 实例，并将实际数据传递给该实例。

一个典型的 MatTableDataSource 初始化示例如下：

import { MatTableDataSource } from '@angular/material/table';

// ... 在组件类中
dataSource: MatTableDataSource<YourDataType>;

// ... 在某个方法中
this.dataSource = new MatTableDataSource(yourDataArray);

登录后复制

2. 异步数据绑定常见陷阱

在 Angular 应用中，数据通常通过 HTTP 请求从后端异步获取。一个常见的错误是在组件的 constructor 中尝试将异步获取的数据直接赋值给 MatTableDataSource。这是因为 constructor 在组件实例化时同步执行，而 HTTP 请求是异步的，其数据返回需要时间。

考虑以下导致表格无法显示数据的错误模式：

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

export class NewsComponent implements OnInit {
  news_list: any; // 存储异步获取的数据
  dataSource: MatTableDataSource<StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse>;

  // 异步数据获取订阅，但其回调会在未来执行
  newsListService = this.newsService.v1Nobina2NewsesGet().subscribe(
    (res) => {
      this.news_list = res; // 数据在此处被赋值
    },
    (err) => { console.log(err); alert("Kolla nätverksanslutnignen(CORS)"); }
  );

  constructor(private newsService: Nobina2NewsesService) {
    // 此时 news_list 很可能尚未被异步数据填充，仍然是 undefined 或空
    this.dataSource = new MatTableDataSource(this.news_list);
  }
  // ...
}

登录后复制

问题分析： 在 constructor 执行时，this.newsListService 的订阅虽然已经开始，但 v1Nobina2NewsesGet() 是一个异步操作。这意味着 (res) => { this.news_list = res; } 回调函数会在未来某个时间点执行，而不是在 constructor 执行时立即执行。因此，当 this.dataSource = new MatTableDataSource(this.news_list); 语句执行时，this.news_list 仍然是 undefined 或空值，导致 MatTableDataSource 被一个空或无效的数据初始化，表格自然无法渲染数据。

3. 正确的异步数据绑定策略

为了确保 MatTableDataSource 在数据可用时才被初始化或更新，我们应该在异步数据请求成功的回调中进行赋值操作。推荐的方法是利用 Angular 的生命周期钩子 ngOnInit 来触发数据加载，并在数据返回后更新 dataSource。

以下是修正后的代码结构，它将数据获取和数据源设置分离，并确保它们按正确的时序执行：

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { Nobina2NewsesService, StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse } from '../../services/mssql/stop/api/v1';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit, AfterViewInit {

  // 初始化为空数组，确保 dataSource 始终有一个有效的数据结构
  news_list: StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse[] = [];
  displayedColumns: string[] = ['id', 'title', 'date', 'text'];
  dataSource: MatTableDataSource<StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse>;

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  constructor(private newsService: Nobina2NewsesService) {
    // 在构造函数中初始化 dataSource，传入空数组，等待数据加载
    this.dataSource = new MatTableDataSource<StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse>(this.news_list);
  }

  ngOnInit(): void {
    this.getData(); // 在组件初始化后开始获取数据
  }

  ngAfterViewInit(): void {
    // 确保 paginator 和 sort 在视图初始化后可用，并赋值给 dataSource
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  /**
   * 获取新闻列表数据
   */
  getData(): void {
    this.newsService.v1Nobina2NewsesGet().subscribe(
      (res: StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse[]) => {
        this.news_list = res;
        this.setDataSource(); // 数据获取成功后，设置数据源
      },
      (err) => {
        console.error('获取新闻数据失败:', err);
        alert("Kolla nätverksanslutnignen(CORS)"); // 提示用户网络连接或CORS问题
      }
    );
  }

  /**
   * 设置 MatTableDataSource 的数据
   */
  setDataSource(): void {
    // 直接更新 dataSource 的 data 属性，这将触发表格刷新
    this.dataSource.data = this.news_list;
    // 如果 paginator 已经设置，确保在数据更新后重置到第一页
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  /**
   * 应用过滤器
   * @param event 输入事件
   */
  applyFilter(event: Event): void {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    // 过滤后回到第一页，提升用户体验
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}

登录后复制

HTML 模板 (app-news.component.html):

<mat-form-field appearance="standard">
  <mat-label>筛选</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="输入关键词筛选" #input>
</mat-form-field>

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort>

    <!-- ID 列 -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
      <td mat-cell *matCellDef="let news"> {{ news.id }} </td>
    </ng-container>

    <!-- 标题列 -->
    <ng-container matColumnDef="title">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 标题 </th>
      <td mat-cell *matCellDef="let news"> {{ news.title }} </td>
    </ng-container>

    <!-- 日期列 -->
    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 日期 </th>
      <td mat-cell *matCellDef="let news"> {{ news.date?.split('T')[0] }} </td>
    </ng-container>

    <!-- 内容列 -->
    <ng-container matColumnDef="text">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> 内容 </th>
      <td mat-cell *matCellDef="let news"> {{ news.text }} </td>
    </ng-container>

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

    <!-- 当没有匹配数据时显示 -->
    <tr class="mat-row" *matNoDataRow>
      <td class="mat-cell" colspan="4">没有匹配 "{{input.value}}" 的数据</td>
    </tr>
  </table>

  <mat-paginator [pageSizeOptions]="[10, 25, 100]" aria-label="选择新闻页"></mat-paginator>
</div>

登录后复制