席表渲染，但没有数据显示- Angular

Question

更新:我一直在搞乱这个安静一段时间现在，现在可以看到列名，但数据仍然只显示在API调用。

我试图在一个表中显示这个数据，到目前为止，我所看到的一切都有这个问题是因为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;更新表数据

@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

下面列出的代码存在一些问题。我还将显示为我工作的正确代码。

1. 没有将MatMenuModule导入到app.module.ts后修复了一些其他的问题，在那里创建
2. ts模型或接口和c#模型名称不匹配
3. 订阅和服务调用被激活。
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);
}
}