Angular Material Table 数据源的正确绑定与异步数据处理

// 错误示例：数据源在异步数据返回前被初始化
constructor(private newsService: Nobina2NewsesService) {
  // 异步请求在此发起，但数据尚未返回并赋值给 news_list
  this.newsService.v1Nobina2NewsesGet().subscribe(
    (res) => { this.news_list = res; /* 数据在这里才可用 */ },
    (err) => { console.log(err); alert("Kolla nätverksanslutnignen(CORS)"); }
  );
  // 问题：此时 news_list 仍为空或 undefined
  this.dataSource = new MatTableDataSource(this.news_list); 
}

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 = new MatTableDataSource<StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse>();

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

  constructor(private newsService: Nobina2NewsesService) {
    // 在构造函数中调用数据获取方法，启动异步数据加载过程
    this.getData();
  }

  ngOnInit(): void {
    // ngOnInit 是执行组件初始化逻辑的推荐生命周期钩子。
    // 在本例中，为确保 dataSource 尽快被初始化，我们在 constructor 中调用了 getData()。
    // 如果数据源初始化不依赖于其他组件视图元素，ngOnInit 也是一个好选择。
  }

  ngAfterViewInit(): void {
    // Paginator 和 Sort 必须在视图初始化完成后才能绑定，
    // 因为 @ViewChild 装饰器只有在此时才能获取到 DOM 元素。
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

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

  /**
   * 设置 MatTableDataSource
   * 该方法在数据成功获取后被调用
   */
  setDataSource(): void {
    this.dataSource = new MatTableDataSource(this.news_list);
    // 重新设置数据源后，需要重新绑定分页器和排序器，
    // 确保它们在数据更新后仍然有效。
    // 这里需要检查 paginator 和 sort 是否已在 ngAfterViewInit 中被赋值。
    if (this.paginator) {
      this.dataSource.paginator = this.paginator;
    }
    if (this.sort) {
      this.dataSource.sort = this.sort;
    }
  }

  /**
   * 应用过滤器到表格数据
   * @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(); // 过滤后回到第一页
    }
  }
}

<mat-form-field appearance="standard">
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Filter" #input>
</mat-form-field>

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

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