Angular Material 从一个组件重定向到另一个也有 MatTableDataSource 的组件后，MatTableDataSource 没有更新

Question

我有 2 个 Angular 模块：

学生
课程

在课程内部，我有一个组件 (CourseListComponent)，我想显示它嵌套在学生组件 (StudentDetailsComponent) 中。所以我需要从课程模块导出该组件：

@NgModule({
    declares [ CourseListComponent ],
    exports: [ CourseListComponent ]
})

我还需要在 Student 中导入 Course 模块：

@NgModule({
    declares: [ StudentListComponent, StudentDetailsComponent ],
    imports: [ CourseModule ]
})

在 StudentListComponent 内部，我有一个带有 MatTableDataSource 的 MatTable，其中包含一些数据：

this.students = this.route.snapshot.data.students;
this.dataSource = new MatTableDataSource(this.students);

当我切换到 StudentDetailsComponent 时，我想显示学生注册的课程列表。我还想在 MatTable 中执行此操作：

this.courses = this.route.snapshot.data.courses;         // returns correct courses
this.dataSource = new MatTableDataSource(this.courses);  // changes filteredData

但是当页面加载时它只显示空 table。我在控制台中没有收到任何错误，只是一个空 table。

有人知道如何解决这个问题吗？

谢谢！

这里是 HTML:

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8" matSort>
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header class="aligned-columns">
            {{ 'COURSE-LIST.ID' | translate }}
        </th>
        <td mat-cell *matCellDef="let course"> 
            {{course.id}} 
       </td>
    </ng-container>
    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
            {{ 'COURSE-LIST.NAME' | translate }}
        </th>
        <td mat-cell *matCellDef="let course">
            {{ course.name}}
        </td>
    </ng-container>
    <ng-container matColumnDef="year">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
            {{ 'COURSE-LIST.YEAR' | translate }}
        </th>
        <td mat-cell *matCellDef="let course"> 
            {{ course.year}} 
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
</table>

在 CourseListComponent 中：

displayedColumns: string[] = ['id', 'name', 'year'];
courses: ICourse[];

和模型：

export inteface ICourse {
    id: number;
    name: string;
    year: string;
}

Answer 1

确保 html 正确。您是否动态生成列？确保列名称与课程字段相同。您是否尝试过在将 this.datasource 分配给课程后打印它？

先做所有这些。

还有一个问题，这些 table 是 2 个单独的 table 中的 2 个单独的组件吗？

尝试

<pre>
  {{ dataSource.data | json }}
</pre>

在你的table

之前

您应该在 table 之前看到您的数据。

它应该看起来像：

[
  {
    "id": 1,
    "name": "fasdfa",
    "year": 1992
  },
  {
    "id": 2,
    "name": "fasdf",
    "year": 2002
  },
  {
    "id": 3,
    "name": "Hydrfasdfogen",
    "year": 2034
  },
  {
    "id": 4,
    "name": "fas",
    "year": 2004
  },
  {
    "id": 5,
    "name": "afsdafasd",
    "year": 2014
  },
]

如果它没有相同的结构，那就是问题所在。或者如果它是空的而不是你没有正确提供数据。

Angular Material 从一个组件重定向到另一个也有 MatTableDataSource 的组件后，MatTableDataSource 没有更新

Angular Material MatTableDataSource not updated after redirecting from one component to another that also has a MatTableDataSource

angular

angular-material

angular-material-table