Angular 6中NullInjectorError: No provider for TemplateRef错误求助

我帮你找到了几个导致这个错误的关键问题，咱们一步步来修正：

错误原因分析 #

1. 多余的*ngFor破坏模板结构：你在每个列定义的<ng-container>上都加了*ngFor="let element of elements"，这完全没必要——Angular Material表格会自动根据数据源渲染行，不需要在列层面循环数据，这个错误指令直接导致了TemplateRef的注入问题。
2. 表头指令使用错误：第一列的<th>用了*matHeaderRowDef，这个指令是用来定义表头行的，表头单元格应该用*matHeaderCellDef。
3. 单元格指令重复循环数据源：*matCellDef="let element of elements"是错误写法，正确的应该是*matCellDef="let element"，Material表格会自动把当前行的数据传递给这个变量。

修正后的HTML代码 #

<div class="example-container mat-elevation-z0">
  <table mat-table #table [dataSource]="elements">
    <!--POSITION COLUMN-------------------------------------------------->
    <ng-container matColumnDef="hangul">
      <th mat-header-cell *matHeaderCellDef> Hangul </th>
      <td mat-cell *matCellDef="let element"> {{element.hangul}} </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>

    <!--CHARACTERS COLUMN-------------------------------------------------->
    <ng-container matColumnDef="character">
      <th mat-header-cell *matHeaderCellDef> Character </th>
      <td mat-cell *matCellDef="let element"> {{element.character}} </td>
    </ng-container>

    <!--SOUND COLUMN------------------------------------------------------>
    <ng-container matColumnDef="sound">
      <th mat-header-cell *matHeaderCellDef> Sound </th>
      <td mat-cell *matCellDef="let element"> {{element.sound}} </td>
    </ng-container>

    <!--TYPE COLUMN------------------------------------------------------>
    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef> Type</th>
      <td mat-cell *matCellDef="let element"> {{element.type}} </td>
    </ng-container>

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

组件代码确认 #

你的组件代码完全没问题，displayedColumns数组和ELEMENT_DATA的定义都符合要求，不需要做任何修改。

简单总结下：去掉列容器上多余的*ngFor，修正表头单元格的指令，让单元格指令使用表格自动传递的行数据变量，这样就能正常渲染表格了。

内容的提问来源于stack exchange，提问作者Randolph