角度材料表不显示来自API服务的数据

// 示例代码：使用HttpClient模块发送请求
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://example.com/api/data';

  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get(this.apiUrl);
  }
}

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

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent implements OnInit {
  displayedColumns: string[] = ['column1', 'column2', 'column3'];
  dataSource: any[];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe(
      (data) => {
        this.dataSource = data;
      },
      (error) => {
        console.error('Error fetching data', error);
      }
    );
  }
}

// 示例代码：假设API返回的数据格式如下
{
  "data": [
    { "column1": "value1", "column2": "value2", "column3": "value3" },
    { "column1": "value4", "column2": "value5", "column3": "value6" }
  ]
}

// 在组件中处理数据
ngOnInit() {
  this.dataService.getData().subscribe(
    (response) => {
      this.dataSource = response.data;
    },
    (error) => {
      console.error('Error fetching data', error);
    }
  );
}

<!-- 示例代码：角度材料表模板 -->
<mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="column1">
    <th mat-header-cell *matHeaderCellDef> Column 1 </th>
    <td mat-cell *matCellDef="let element"> {{element.column1}} </td>
  </ng-container>

  <ng-container matColumnDef="column2">
    <th mat-header-cell *matHeaderCellDef> Column 2 </th>
    <td mat-cell *matCellDef="let element"> {{element.column2}} </td>
  </ng-container>

  <ng-container matColumnDef="column3">
    <th mat-header-cell *matHeaderCellDef> Column 3 </th>
    <td mat-cell *matCellDef="let element"> {{element.column3}} </td>
  </ng-container>

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

// 示例代码：简单的权限验证
ngOnInit() {
  if (this.hasPermission()) {
    this.dataService.getData().subscribe(
      (response) => {
        this.dataSource = response.data;
      },
      (error) => {
        console.error('Error fetching data', error);
      }
    );
  } else {
    console.error('Permission denied');
  }
}

hasPermission() {
  // 简单的权限验证逻辑
  return true; // 或者根据实际情况返回true或false
}