Question

我当前使用的是角度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"
  }
}

app-module.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 { }

app-routing-module.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-table，该错误将消失。

Answer 1

事实是，您使用的是新版 Angular 和旧版 Angular 材质。

您的版本：

Angular: "~10.0.5",
Angulae material: "^6.2.0"

更新 Angular Material，您将不会看到此错误。

更新 Angular 材质：

npm remove @angular/material @angular/cdk
npm add @angular/material @angular/cdk

错误！无法读取未定义的属性“ viewContainer”

1 个答案: