Angular:如何将服务连接到Material RankTable？

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data: any[] = []; // 假设这是从后端获取的数据

  constructor() { }

  getData(): any[] {
    return this.data;
  }

  fetchData(): void {
    // 从后端获取数据的逻辑
  }
}

import { Component, OnInit } from '@angular/core';
import { DataService } from '路径/data.service';

@Component({
  selector: 'app-rank-table',
  templateUrl: './rank-table.component.html',
  styleUrls: ['./rank-table.component.css']
})
export class RankTableComponent implements OnInit {
  data: any[] = [];

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.data = this.dataService.getData();
  }
}

<mat-table [dataSource]="data">
  <!-- 列定义 -->
  <ng-container matColumnDef="column1">
    <mat-header-cell *matHeaderCellDef> Column 1 </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.column1}} </mat-cell>
  </ng-container>

  <!-- 其他列定义 -->

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