Question

我正在尝试使用成角度的material table，但发现以下错误：

    ERROR TypeError: "this._elementRef is undefined"
    ERROR CONTEXT

在以下行上：

    <mat-table [dataSource]="data" class="example-table"
               matSort matSortActive="created" matSortDisableClear      matSortDirection="desc">

我注意到，当我删除mat-table标签时，错误消失了。

注意：我的应用程序模块已经在导入MatTableModule

这是我的整个表代码：

html

    (...)

    <mat-table [dataSource]="data" class="example-table"
           matSort matSortActive="created" matSortDisableClear matSortDirection="desc">
      <!-- CRM Column -->
      <ng-container matColumnDef="crm">
        <th mat-header-cell *matHeaderCellDef>CRM</th>
        <td mat-cell *matCellDef="let row">{{row.crm}}</td>
      </ng-container>

      <!-- CPF Column -->
      <ng-container matColumnDef="cpf">
        <th mat-header-cell *matHeaderCellDef>CPF</th>
        <td mat-cell *matCellDef="let row">{{row.cpf}}</td>
      </ng-container>

      <ng-container matColumnDef="especializacao">
        <th mat-header-cell *matHeaderCellDef>Especialização</th>
        <td mat-cell *matCellDef="let row">{{row.especializacao}}</td>
      </ng-container>

      <!-- Nome Column -->
      <ng-container matColumnDef="nome">
        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear></th>
        <td mat-cell *matCellDef="let row">{{row.nome}}</td>
      </ng-container>

      <!-- Telefone Column -->
      <ng-container matColumnDef="telefone">
        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear></th>
        <td mat-cell *matCellDef="let row">{{row.telefone}}</td>
      </ng-container>


      <!-- Data nascismento Column -->
      <ng-container matColumnDef="data_de_nascimento">
        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear></th>
        <td mat-cell *matCellDef="let row">{{row.data_de_nascimento}}</td>
      </ng-container>

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

    (...)

js

  // (...)

  data: MedicData[] = [];

  // (...)

  export interface MedicData {
    crm: string;
    cpf: string;
    especializacao: string;
    nome: string;
    telefone: string;
    data_de_nascimento: string;
  }

Answer 1

我不知道这是否引起确切的错误，但是我注意到的一件事是您使用指令mat-table作为元素名称<mat-table></mat-table>。完全可以，但是您可以使用元素名称<td></td>而不是<mat-cell></mat-cell>等。没有父级<td>的{{1}}和<tr></tr>是不存在的，因此很可能会引起问题。

Answer 2

您必须像这样更改tsconfig.json中的目标：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/app",
    "types": [],
    "target": "es5"
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

并像这样使用polyfills：

import '@webcomponents/custom-elements/custom-elements.min';
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter';

角材料表-this._elementRef未定义

2 个答案: