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

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

Answer 1

您已经写过：matHeaderCellDif而不是matHeaderCellDef

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

Answer 2

您用matHeaderCellDef输错了matHeaderCellDif

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

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

2 个答案: