Question

我一直试图在我的应用程序中使用一个表格，我最终尝试使用他们在网站上提供的非常简单的示例表格代码：https://material.angular.io/components/table/overview

但是当我将它添加到我的代码中时，我得到了三个错误。

发生这种情况有点荒谬，当然他们自己的示例代码应该适用于最新版本的 Angular。

是的，在任何人问之前，MatTableModule 已导入 app.module

core.js:6156 ERROR TypeError: Cannot read property 'elementRef' of undefined
    at MatTable._applyNativeTableSections (table.js:2006)
    at MatTable.ngOnInit (table.js:1459)
    at callHook (core.js:2512)
    at callHooks (core.js:2483)
    at executeInitAndCheckHooks (core.js:2434)
    at selectIndexInternal (core.js:8370)
    at Module.ɵɵadvance (core.js:8353)
    at WizardComponent_Template (wizard.component.html:30)
    at executeTemplate (core.js:9499)
    at refreshView (core.js:9368)

(anonymous) @ main.js:1
core.js:6156 ERROR TypeError: Cannot read property 'diff' of undefined
    at MatTable.renderRows (table.js:1537)
    at SafeSubscriber._next (table.js:1856)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at TakeUntilSubscriber._next (Subscriber.js:72)
    at TakeUntilSubscriber.next (Subscriber.js:49)
    at Observable._subscribe (subscribeToArray.js:3)
    at Observable._trySubscribe (Observable.js:42)

zone-evergreen.js:171 Uncaught TypeError: Cannot read property 'classList' of null
    at StickyStyler._addStickyStyle (table.js:971)
    at table.js:934
    at SafeSubscriber._next (table.js:403)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at TakeUntilSubscriber._next (Subscriber.js:72)
    at TakeUntilSubscriber.next (Subscriber.js:49)
    at TakeSubscriber._next (take.js:35)

这有点麻烦，因为即使是他们的示例代码也无法正常工作。我没有做任何不寻常的事情。这是我的模板和组件中的代码。

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

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

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

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

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


import {Component} from '@angular/core';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
}

角度版本

Angular CLI: 11.1.1
Node: 12.18.2
OS: win32 x64

Angular: 11.1.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1101.1
@angular-devkit/build-angular   0.1101.1
@angular-devkit/core            11.1.1
@angular-devkit/schematics      11.1.1
@angular/cli                    11.1.1
@angular/fire                   6.1.1
@schematics/angular             11.1.1
@schematics/update              0.1101.1
rxjs                            6.5.5
typescript                      4.1.3

软件包版本

+-- @angular/animations@11.1.0
+-- @angular/cdk@11.1.0
+-- @angular/common@11.1.0
+-- @angular/core@11.1.0
+-- @angular/forms@11.1.0
+-- @angular/material@11.1.0
+-- @angular/platform-browser@11.1.0
+-- rxjs@6.6.3
`-- zone.js@0.11.3

Answer 1

可以尝试使用角度材料中的表格原理图，而不是从网站上的代码中一一复制。

您可以查看the table schematic link。

希望对你有帮助。 :D

使用角度材料网站上的示例代码时出现角度材料表错误

1 个答案: