angular - あるコンポーネントから MatTableDataSource を持つ別のコンポーネントにリダイレクトした後、Angular Material MatTableDataSource が更新されない

Question

私は2つのAngularモジュールを持っています:

• 学生
• コース

コース内には、Student コンポーネント (StudentDetailsComponent) 内にネストして表示したいコンポーネント (CourseListComponent) があります。したがって、そのコンポーネントを Course モジュールからエクスポートする必要があります。

@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

しかし、ページが読み込まれると、空のテーブルだけが表示されます。コンソールにエラーは表示されず、空のテーブルが表示されます。

この問題を解決する方法を知っている人はいますか?

ありがとうございました！

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