Angular mat-table渲染显示列名但API返回数据不展示问题求助

问题根因 #

• 接口响应数据未正确赋值给数据源：你在接口请求的成功回调里拿到了响应结果res，但初始化MatTableDataSource时传入的是从未赋值的空变量this.dataArray，导致数据源始终为空
• 模板字段大小写不匹配：你模板内插值用的是大驼峰格式的ExerciseName、MuscleGroupId，如果接口返回的字段是和matColumnDef一致的小驼峰格式，会导致字段读取失败无内容
• Subscription实例化缺失括号，属于语法不规范问题

修复方案 #

第一步：修正TypeScript代码 #

调整订阅逻辑将响应结果赋值给数据源，同时补全语法规范：

import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { IExercises } from 'src/app/models/IExcercises';
import { WorkoutService } from '../../services/workout.services'
import { MatPaginator} from '@angular/material/paginator';
import { Subscription } from 'rxjs';
import { MatSort, MatTableDataSource } from '@angular/material';
import { HttpErrorResponse } from '@angular/common/http';

@Component({
  selector: 'app-view-exercise',
  templateUrl: './view-exercise.component.html',
  styleUrls: ['./view-exercise.component.css']
})
export class ViewExerciseComponent implements OnInit, OnDestroy {
  errorMessage: string;
  isLoadingData = true;

  // 修正Subscription实例化语法
  private subs = new Subscription();

  dataSource: MatTableDataSource<IExercises>;
  displayedColumns = ['exerciseId','exerciseName','muscleGroupId'];
  @ViewChild(MatPaginator, { static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;

  constructor(private workoutService: WorkoutService) { }

  ngOnInit() { 
    this.subs.add(this.workoutService.getExercises()
    .subscribe((res) =>
      {
        // 修正：将接口返回的res传入数据源
        this.dataSource = new MatTableDataSource<IExercises>(res);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.isLoadingData = false;
      },
      (error: HttpErrorResponse) => {
        console.log(error);
        this.isLoadingData = false;
        this.errorMessage = '数据加载失败';
      }));
   }

   ngOnDestroy() {
     if (this.subs) {
       this.subs.unsubscribe();
     }
   }
}

第二步：修正模板内字段大小写 #

保证接口返回字段、matColumnDef属性值、模板插值变量三者一致即可，如果接口返回的是小驼峰格式，调整模板代码如下：

<p>view-workouts works!</p>
 
<div class="mat-elevation-z8"> 
<table mat-table [dataSource]="dataSource" matSort >

    <ng-container matColumnDef="exerciseId">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Exercise Number</th>
        <td mat-cell *matCellDef="let entry">{{ entry.exerciseId }}</td>
    </ng-container>

    <ng-container matColumnDef="exerciseName">
        <th mat-header-cell *matHeaderCellDef>Exercise Name</th>
        <td mat-cell *matCellDef="let entry">{{ entry.exerciseName }}</td>
    </ng-container>

    <ng-container matColumnDef="muscleGroupId">
        <th mat-header-cell *matHeaderCellDef>Muscle Group</th>
        <td mat-cell *matCellDef="let entry">{{ entry.muscleGroupId }}</td>
    </ng-container>
    
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator class="mat-elevation-z8"
                    [pageSize]="3"
                    [pageSizeOptions]="[3,5,10]"
                    [showFirstLastButtons]="true">
</mat-paginator>
</div>

如果接口实际返回的是大驼峰格式字段，把matColumnDef的值和displayedColumns数组内的字段同步改成大驼峰即可。

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