Angular Material Table 数据源异步加载与绑定教程

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)"); },
    () => console.log('done a lot  with news!')
  );

  constructor(private newsService: Nobina2NewsesService) {
    // 此时 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 {

  // 定义存储数据的变量和 MatTableDataSource 实例
  news_list: StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse[] = [];
  displayedColumns: string[] = ['id', 'title', 'date', 'text'];
  dataSource: MatTableDataSource<StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse>;

  // 引用 MatPaginator 和 MatSort
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  constructor(private newsService: Nobina2NewsesService) {
    // 在构造函数中初始化空的 MatTableDataSource，或者延迟到数据加载后
    // 推荐在数据加载后初始化，这里先初始化是为了类型安全
    this.dataSource = new MatTableDataSource<StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse>([]);
  }

  ngOnInit(): void {
    // 在组件初始化时调用数据加载方法
    this.getData();
  }

  ngAfterViewInit() {
    // 确保 paginator 和 sort 在视图初始化后被赋值给 dataSource
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  // ... 其他方法
}

// 承接上面的 NewsComponent 类
export class NewsComponent implements OnInit, AfterViewInit {
  // ... (之前的属性和构造函数)

  ngOnInit(): void {
    this.getData(); // 在 ngOnInit 中调用数据加载方法
  }

  // 获取数据的方法
  getData(): void {
    this.newsService.v1Nobina2NewsesGet().subscribe(
      (res: StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse[]) => {
        this.news_list = res; // 数据获取成功，赋值给 news_list
        this.setDataSource(); // 调用方法设置 dataSource
      },
      (err) => {
        console.error('Error fetching news:', err);
        alert("Kolla nätverksanslutnignen(CORS)");
      }
    );
  }

  // 设置 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;
    }
  }

  // 过滤方法
  applyFilter(event: Event) {
    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-container>

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

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

    <!-- Text Column -->
    <ng-container matColumnDef="text">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Text </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>

    <!-- Row shown when there is no matching data. -->
    <tr class="mat-row" *matNoDataRow>
      <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
    </tr>
  </table>

  <mat-paginator [pageSizeOptions]="[10, 25, 100]" aria-label="Select page of news"></mat-paginator>
</div>