Angular6 - TypeError: Невозможно прочитать свойство 'template' из неопределенного

Question

Я все еще получаю ошибку из названия.Я уже проверил все решения из похожих тем и ничего не работает.Вот мой 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

Эта ошибка появляется в консоли четыре раза, вероятно, для каждого нг-container.

Answer 1

Вы набрали matHeaderCellDef с matHeaderCellDif

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

Answer 2

Вы пишете: matHeaderCellDif, а не matHeaderCellDef

Поэтому в таблице попробуйте выбрать шаблон с помощью селектора MatHeaderCellDef (который возвращает неопределенное значение)