我目前正在使用 angular 10，我想路由到两个不同的视图，并且出现了这个错误。我想要实现的是每当我单击特定按钮时，它都会显示视图。我为视图制作了两个不同的组件。
core.js:4196 ERROR TypeError: Cannot read property 'viewContainer' of undefined
at MatTable._forceRenderHeaderRows (table.js:1637)
at MatTable.ngAfterContentChecked (table.js:1228)
at callHook (core.js:3041)
at callHooks (core.js:3007)
at executeInitAndCheckHooks (core.js:2959)
at refreshView (core.js:7356)
at refreshComponent (core.js:8453)
at refreshChildComponents (core.js:7108)
at refreshView (core.js:7365)
at refreshComponent (core.js:8453)
这些是依赖项：
{
"name": "app-test",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~10.0.5",
"@angular/common": "~10.0.5",
"@angular/compiler": "~10.0.5",
"@angular/core": "~10.0.5",
"@angular/forms": "~10.0.5",
"@angular/platform-browser": "~10.0.5",
"@angular/platform-browser-dynamic": "~10.0.5",
"@angular/router": "~10.0.5",
"@fortawesome/angular-fontawesome": "^0.7.0",
"@fortawesome/fontawesome-free": "^5.14.0",
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-brands-svg-icons": "^5.14.0",
"@fortawesome/free-regular-svg-icons": "^5.14.0",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
"bootstrap": "^4.5.0",
"jquery": "^3.5.1",
"ngx-pagination": "^5.0.0",
"popper.js": "^1.16.1",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"zone.js": "~0.10.3",
"@angular/cdk": "^6.2.0",
"@angular/material": "^6.2.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.4",
"@angular/cli": "~10.0.4",
"@angular/compiler-cli": "~10.0.5",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.5"
}
}
应用模块.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { NgxPaginationModule } from 'ngx-pagination';
import { DataTableComponent } from './data-table/data-table.component';
import { MatTableModule, MatPaginatorModule, MatSortModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
SidebarComponent,
routingComponents,
DataTableComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FontAwesomeModule,
NgxPaginationModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
应用程序路由模块.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RekeningComponent } from './rekening/rekening.component';
import { IdentitasComponent } from './identitas/identitas.component';
const routes: Routes = [
{ path:'rekening', component: RekeningComponent },
{ path:'identitas', component: IdentitasComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [RekeningComponent, IdentitasComponent]
请帮忙，我不知道该怎么做。
表格的已编辑 v2 HTML
<table mat-table matSort class="table-bordered" style="margin-left: 120px;">
<tr class="bg-primary">
<th mat-sort-header="iname" class="text-white p-3 pl-3 pr-3">Name</th>
<th mat-sort-header="itype" class="text-white p-3 pl-3 pr-3">Document Type</th>
<th mat-sort-header="idate" class="text-white p-3 pl-3 pr-3">Document Date</th>
<th mat-sort-header="ver" class="text-white p-3 pl-3 pr-3">Version</th>
<th mat-sort-header="idesc" class="text-white p-3 pl-3 pr-3">Document Description</th>
<th mat-sort-header="istatus" class="text-white p-3 pl-3 pr-3">Status</th>
</tr>
<tr *ngFor = "let data of sortedrdoc">
<td class="p-2 pl-2 pr-2">{{ data.name }}</td>
<td class="p-2 pl-2 pr-2">{{ data.type }}</td>
<td class="p-2 pl-2 pr-2">{{ data.date }}</td>
<td class="p-2 pl-2 pr-2">{{ data.version }}</td>
<td class="p-2 pl-2 pr-2">{{ data.description }}</td>
<td class="p-2 pl-2 pr-2">{{ data.status }}</td>
</tr>
</table>
这是我用于我的表的代码。之前，我使用 mat cell 但错误是一样的。如果我不使用 mat-table，错误将会消失。