mat-table 渲染但没有数据显示 - Angular

Question

更新：我已经安静地搞乱了一段时间，现在可以看到列名，但数据仍然只显示在 API 调用中。

我正在尝试在 table 中显示此数据，到目前为止我看到的所有出现此问题的原因都是因为 displayColumns 值不正确。这不是我的问题，我不认为，所以我想知道我还缺少什么。

需要注意的是数据从我的数据库到达我的前端，我可以在我的网络选项卡中看到它，所以我知道数据正在“可用”

这是我的标记：

<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>

这是我的 ts:

import { Component, OnInit, ViewChild } 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 {
  errorMessage: string;
  isLoadingData = true;

  private subs = new Subscription
  private dataArray: any;

  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) =>
      {
        this.dataSource = new MatTableDataSource<IExercises>(this.dataArray);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      },
      (error: HttpErrorResponse) => {
        console.log(error);
      }));
   }

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

Answer 1

立即初始化数据源dataSource = new MatTableDataSource<IExercises[]>([]);并使用this.dataSource.data = exercises;更新table数据。

   @Component({
      selector: 'app-view-workouts',
      templateUrl: './view-workouts.component.html',
      styleUrls: ['./view-workouts.component.css']
    })
    export class ViewWorkoutsComponent implements OnInit {
      dataSource = new MatTableDataSource<IExercises>([]);
      errorMessage: string;
      displayedColumns = ['exerciseId','exerciseName','muscleGroupId'];
      isLoadingData = true;
      @ViewChild(MatPaginator, { static: true}) paginator: MatPaginator;
    
      constructor(private workoutService: WorkoutService) { }
    
      ngOnInit() {
        this.refreshExercises();
      }
    
      refreshExercises() {
         this.workoutService.getExercises().pipe(
          finalize(() => this.isLoadingData = false)
        )
          .subscribe((exercises: IExercises[]) => {
            this.dataSource.data = exercises;
            this.dataSource.paginator = this.paginator
          },
            (error: Error) => this.errorMessage = error.message);
    
      }
    }

Answer 2

代码存在一些问题，如下所示。我还将展示对我有用的正确代码。

修复后没有将 MatMenuModule 导入 app.module.ts，因为存在其他一些创建的问题
ts 模型或接口与 c# 模型名称不匹配
订阅和服务呼叫已中断。

HTML

<div class="mat-elevation-z8"> 
<table mat-table [dataSource]="dataSource">

    <ng-container matColumnDef="exerciseId">
        <th mat-header-cell *matHeaderCellDef>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>
</div>

ts

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

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

  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.refreshExercises();
  }

  refreshExercises() {
     this.workoutService.getExercises().pipe(
      finalize(() => this.isLoadingData = false)
    )
      .subscribe((exercises: IExercises[]) => {
        this.dataSource = new MatTableDataSource<IExercises>(exercises)
        //this.dataSource.paginator = this.paginator
      },
        (error: Error) => this.errorMessage = error.message);
    }
}

mat-table 渲染但没有数据显示 - Angular

mat-table rendering but no data shows - Angular

asp.net-core

angular

mat-table