angular - 无法读取 MatTable 中未定义的属性“viewContainer”（角度材料表）

Question

我正在尝试在组件（对话框）中显示用户表，但出现此错误：

core.js:4610 错误类型错误：无法在 matTable.ngOnDestroy (table.js:1457) 处的 cleanUpView (core.js:6456) at destroyViewTree (core.js:6532) 处读取未定义的属性“viewContainer”。 js:6282) 在destroyLView

HTML：

<table mat-table [dataSource]="usersList" [multiTemplateDataRows]= 'true' matSort id="ExampleTable" color="light">


    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
      <td mat-cell *matCellDef="let row">{{row.email}}</td>
    </ng-container>

    <ng-container matColumnDef="role">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Role</th>
      <td mat-cell *matCellDef="let row"><b>{{row.role}}</b></td>
    </ng-container>

    <ng-container matColumnDef="edit">
      <th mat-header-cell *matHeaderCellDef>Edit</th>
      <td mat-cell *matCellDef="let row">
        <button  mat-icon-button aria-label="Example icon button with a vertical three dot icon">
          <mat-icon>edit</mat-icon>
        </button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row *matRowDef="let row; columns: columnsToDisplay;" class="example-detail-row"></tr>
  </table>
  <mat-paginator [pageSizeOptions]="[25, 50, 100, 150, 200, 300, 500]" showFirstLastButtons></mat-paginator>

.TS

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { ComponentService } from '../component.service';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})
export class UsersComponent implements OnInit, AfterViewInit {
  @ViewChild(MatSort, { static: true }) sort: MatSort;
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  usersList: any;
  columnsToDisplay = ['email', 'role', 'edit'];
  filteredUsers = [];
  scrollMode = 'normal'
  constructor(
    private componentService: ComponentService
  ) { }

  ngOnInit() {
    this.componentService.getUsers().subscribe(users => {
      users.forEach((user, i, arr) => {
        this.filteredUsers.push(user);
        if(i === arr.length -1) {
          this.usersList = this.filteredUsers;
          this.usersList = new MatTableDataSource(users);
          this.usersList.paginator = this.paginator;
        }
      })
      
    })
  }

  ngAfterViewInit() {
    this.usersList.sort = this.sort;
  }

}

   

    

“@angular/cdk”：“11.0.0”，“@angular/common”：“11.0.0”，“@angular/compiler”：“11.0.0”，“@angular/core”：“11.0.0 ", "@angular/forms": "11.0.0", "@angular/material": "11.0.0", "@angular/material-moment-adapter": "11.0.0",

标签： angularangular-materialmaterial-uiangular-material2