Angular中Material Table展示嵌套REST API数据问题排查与解决

你的代码存在几个关键错误，导致表格无法加载数据，以下是具体问题和修正后的代码：

错误分析 #

1. API返回类型定义错误：你的接口Users描述的是单个包含list数组的对象，但服务中getUsers方法错误地定义返回Observable<Users[]>（数组类型），而实际API返回的是单个Users对象。
2. 数据源赋值错误：组件中订阅API后，直接将整个response传入MatTableDataSource，但实际表格需要的是response里的list数组数据。
3. 变量类型不匹配：组件中users初始定义为any[]，但实际赋值的是MatTableDataSource实例，类型不统一会导致数据绑定异常。

修正后的代码 #

1. 服务代码（UsersService） #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, tap } from 'rxjs';
import { Users } from './users';

@Injectable({ providedIn: 'root' })
export class UsersService {
  constructor(private http: HttpClient) { }

  getUsers(): Observable<Users> {
    // 恢复你的请求头配置（如果需要）
    // const myHeader = new HttpHeaders().set('id', '123456');
    return this.http.get<Users>(`https://api.users.com/user/list`).pipe(
      tap(response => console.log('API返回数据:', response)),
    );
  }
}

2. 组件代码（UsersComponent） #

import { OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { UsersService } from './users.service';
import { List } from './list';

export class UsersComponent implements OnInit{
  displayedColumns: string[] = ['id', 'first_name', 'login', 'phone'];
  // 正确定义数据源类型
  users = new MatTableDataSource<List>();

  constructor(private usersService: UsersService){ }

  ngOnInit(): void {
    this.onGetUsers();
  }

  onGetUsers(): void{
    this.usersService.getUsers().subscribe(
      (response) => {
        // 将API返回的list数组赋值给数据源的data属性
        this.users.data = response.list;
      },
      (error) => {
        console.error('获取用户数据失败:', error);
      }
    );
  }
}

3. HTML代码（无需修改） #

你的HTML代码逻辑正确，保持原样即可：

<table mat-table [dataSource]="users" class="mat-elevation-z8">
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> ID </th>
      <td mat-cell *matCellDef="let element">{{element.id}}</td>
    </ng-container>

    <ng-container matColumnDef="first_name">
      <th mat-header-cell *matHeaderCellDef> first_name </th>
      <td mat-cell *matCellDef="let element">{{element.first_name}}</td>
    </ng-container>
  
    <ng-container matColumnDef="login">
      <th mat-header-cell *matHeaderCellDef> login </th>
      <td mat-cell *matCellDef="let element">{{element.login}}</td>
    </ng-container>
  
    <ng-container matColumnDef="phone">
      <th mat-header-cell *matHeaderCellDef> phone </th>
      <td mat-cell *matCellDef="let element">{{element.phone}}</td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

额外建议 #

• 始终在订阅中添加错误处理逻辑，方便排查API请求失败的问题。
• 使用console.log打印API返回的response，确认数据结构是否和接口定义一致。

内容的提问来源于stack exchange，提问作者Kareem