Angular Material Table 数据源异步加载与显示最佳实践

export class NewsComponent implements OnInit {
  news_list: any; // 数据变量
  // ... 其他属性

  newsListService = this.newsService.v1Nobina2NewsesGet().subscribe(
    (res) => {
      this.news_list = res; // 异步回调中赋值
    },
    // ... 错误处理
  );

  constructor(private newsService: Nobina2NewsesService) {
    // PROBLEM: 在构造函数中，news_list 很可能还未被赋值
    this.dataSource = new MatTableDataSource(this.news_list);
  }

  ngOnInit(): void {
    throw new Error('Method not implemented.'); // 此处也未进行有效的数据加载
  }
  // ... 其他方法
}

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 {

  // 建议初始化为空数组，并明确类型
  news_list: StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse[] = [];
  displayedColumns: string[] = ['id', 'title', 'date', 'text'];
  // 明确 dataSource 的类型
  dataSource: MatTableDataSource<StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse>;

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

  constructor(private newsService: Nobina2NewsesService) {
    // 构造函数中仅进行依赖注入，并初始化一个空的 MatTableDataSource 实例
    // 这样可以确保 dataSource 始终是一个有效的 MatTableDataSource 对象，避免 null/undefined 错误
    this.dataSource = new MatTableDataSource<StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse>([]);
  }

  ngOnInit(): void {
    // 在 ngOnInit 生命周期钩子中调用数据获取方法
    this.getData();
  }

  ngAfterViewInit() {
    // 在这里设置分页器和排序器到当前的 dataSource 实例
    // 注意：如果 dataSource 实例在 setDataSource() 中被替换，这些绑定需要重新应用
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  /**
   * 获取新闻列表数据
   */
  getData(): void {
    this.newsService.v1Nobina2NewsesGet().subscribe(
      (res: StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse[]) => {
        this.news_list = res; // 数据成功获取后赋值给 news_list
        this.setDataSource(); // 然后调用方法设置 dataSource
      },
      (err) => {
        console.error('获取新闻数据失败:', err);
        alert("Kolla nätverksanslutnignen(CORS)"); // 错误处理
      }
      // complete 回调可以根据需要添加
    );
  }

  /**
   * 设置 MatTableDataSource
   */
  setDataSource(): void {
    // 使用已获取的数据创建新的 MatTableDataSource 实例
    this.