Angular Material Table数据源赋值失败，请求技术协助

核心问题分析 #

1. 异步数据初始化时机错误：构造函数执行时HTTP请求尚未返回数据，此时news_list为undefined，导致dataSource初始化为空。后续请求返回后仅更新了news_list，但未同步更新dataSource的数据源，表格无法感知数据变化。
2. ngOnInit方法抛出异常：该方法直接抛出Method not implemented错误，会中断组件初始化流程，导致后续逻辑无法执行。
3. 订阅管理不规范：直接在类属性中定义订阅，未在组件销毁时取消订阅，存在内存泄漏风险。

修复后的TypeScript代码 #

import { Component, OnInit, ViewChild, OnDestroy } 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';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-news',
  templateUrl: "./news.component.html",
  styleUrls: "./news.component.css"
})

export class NewsComponent implements OnInit, OnDestroy {

  news_list: StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse[] = [];
  displayedColumns: string[] = ['id', 'title', 'date', 'text'];
  dataSource: MatTableDataSource<StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse>;

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

  private newsSubscription?: Subscription;
  
  constructor(private newsService: Nobina2NewsesService) {
    this.dataSource = new MatTableDataSource([]);
  }

  ngOnInit(): void {
    this.loadNewsData();
  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  ngOnDestroy(): void {
    this.newsSubscription?.unsubscribe();
  }

  loadNewsData(): void {
    this.newsSubscription = this.newsService.v1Nobina2NewsesGet().subscribe(
      (res) => {
        this.news_list = res;
        // 更新数据源并通知表格刷新
        this.dataSource.data = this.news_list;
      },
      (err) => { 
        console.log(err); 
        alert("检查网络连接(CORS)"); 
      },
      () => console.log('新闻数据加载完成!')
    );
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}

关键修改说明 #

• 移除ngOnInit中的错误抛出逻辑，改为调用数据加载方法，保证组件初始化流程正常执行。
• 在HTTP请求成功回调中，通过this.dataSource.data = this.news_list更新表格数据源，触发表格重新渲染。
• 实现OnDestroy接口，在组件销毁时取消HTTP订阅，避免内存泄漏。
• 初始化news_list为空数组，避免初始值为undefined带来的潜在类型问题。
• 将订阅逻辑封装到loadNewsData方法中，提升代码可读性和可维护性。

额外注意点 #

• 检查HTML中title列的{{news.title}}%，如果title字段不是百分比数值，建议移除多余的%符号，避免显示错误。
• 确保StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse接口包含id、title、date、text字段，避免模板中出现属性不存在的报错。

内容的提问来源于stack exchange，提问作者Oscar