Angular 9 Проблема с таблицей расчетов материалов

Question

Я получаю это предупреждение, но моя таблица не отображается.

Невозможно выполнить привязку к 'matHeaderRowDef', поскольку это не известное свойство 'tr'.

Невозможно выполнить привязку к 'matRowDefColumns', поскольку это неизвестное свойство 'tr'.

Модуль панели мониторинга

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard.component';
import { DashboardService } from './dashboard.service';
import {MatTableModule} from '@angular/material/table';

@NgModule({
  declarations: [DashboardComponent],
  imports: [
    CommonModule,
    MatTableModule
  ],
  providers: [
    DashboardService
  ]
})
export class DashboardModule { }

Компонент приборной панели

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  public displayedColumns: string[];
  dataSource;

  constructor() { }

  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  ngOnInit(): void {
     this.createTable();
   }

  createTable() {
    this.displayedColumns = ['name', 'count'];
    this.dataSource = new MatTableDataSource<any>(apiResponse); //api response is actual api response 
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }
}

HTML Код страницы

<div class="mat-elevation-z8">
          <table mat-table [dataSource]="dataSource">

            <ng-container matColumnDef="name">
              <th mat-header-cell *matHeaderCellDef> Name </th>
              <td mat-cell *matCellDef="let element"> {{element.name}} </td>
            </ng-container>

            <ng-container matColumnDef="count">
              <th mat-header-cell *matHeaderCellDef> Count </th>
              <td mat-cell *matCellDef="let element"> {{element.count}} </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
          </table>

          <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>

Изображение ошибки:

Но все же моя таблица не отображается, может кто-нибудь мне с этим помочь. Заранее спасибо.

Answer 1

Вам необходимо импортировать в модуль панели инструментов и добавить внутри импорта [] модуль MatPaginatorModule

Answer 2

нужно импортировать MatTableModule в модуль, где объявлен этот компонент ...

import {MatTableModule} from '@angular/material/table';

@NgModule({
  imports: [
    ... other imports ...
    MatTableModule
  ],
  ... rest of module declarations ...
})