Angular6-TypeError：无法读取未定义的属性“模板”答案

【问题标题】：Angular6 - TypeError: Cannot read property 'template' of undefinedAngular6-TypeError：无法读取未定义的属性“模板”
【发布时间】：2019-02-24 13:04:01
【问题描述】：

我仍然收到标题错误。我已经检查了类似主题的所有解决方案，但没有任何效果。这是我的 HTML 文件：

<div>
 <br>
 <mat-card>
 <button mat-raised-button color="primary">Add</button>
<br><br>
<mat-divider></mat-divider>
<br>
<table mat-table [dataSource]="events">

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

  <ng-container matColumnDef="EventLocation">
    <th mat-header-cell *matHeaderCellDif>Location</th>
    <td mat-cell *matCellDef="let element">{{element.EventLocation}}</td>
  </ng-container>

  <ng-container matColumnDef="EventDate">
    <th mat-header-cell *matHeaderCellDif>Date</th>
    <td mat-cell *matCellDef="let element">{{element.EventDate}}</td>
  </ng-container>

  <ng-container matColumnDef="EventReq">
    <th mat-header-cell *matHeaderCellDif>Req</th>
    <td mat-cell *matCellDef="let element">{{element.EventReq}}</td>
  </ng-container>

  <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDif>Actions</th>
    <td mat-cell *matCellDef="let element">
      <button mat-button color="primary">Details</button>
    </td>
  </ng-container>

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

</table>

我是使用角度和角度材料库的初学者，所以我可能错过了一个命令。

events.component.ts：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Event } from '../event.module';
import { EventService } from '../_services/event/event.service';
import { MatTableDataSource } from '@angular/material';
@Component({
  selector: 'app-events',
  templateUrl: './events.component.html',
  styleUrls: ['./events.component.css']
})
export class EventsComponent implements OnInit {
  events: Event[];
  displayedColumns = ['EventName', 'EventLocation', 'EventDate', 'EventReq'];

  constructor(private eventService: EventService, private router: Router) {}

  ngOnInit() {
    this.fetchEvents();
  }

  fetchEvents() {
    this.eventService.getEvents().subscribe((data: Event[]) => {
      this.events = data;
      console.log('Waiting ...');
      console.log(this.events);
    });
  }
}

任何建议都会非常有帮助。感谢您的宝贵时间。

错误： 1 第二部分： 2

此错误在控制台中出现四次，可能出现在每个 ng-container 中。

【问题讨论】：

请附上您收到的错误信息
@JamieRees 我在帖子中添加了一条消息

标签： angular typescript angular-material angular6

【解决方案1】：

你写的是：matHeaderCellDif 而不是 matHeaderCellDef

因此表格尝试使用 MatHeaderCellDef 选择器选择模板（返回未定义）

【讨论】：

我无法相信为一个错字付出了这么大的努力。感谢您的帮助。

【解决方案2】：

您将matHeaderCellDef 与matHeaderCellDif 打错了

https://stackblitz.com/edit/angular-9qcw1e

【讨论】：