角度垫表显示错误

Question

我对Angular开发还很陌生，我正在尝试显示一个表格。为此，我遵循的是很容易理解的本教程： https://codingthesmartway.com/angular-material-part-4-data-table/。

但是，我不断收到此错误：

这些是我组件的文件：

要在表格中呈现的项目类：

export class Service{
    id: string;
    name: string;
    description: string;
    installedVersion: string;
    state: ServiceState;
    lastestVersion: string;    
}

组件TS：

import { Component, Input, OnInit } from '@angular/core';
import { Observable, of, BehaviorSubject } from 'rxjs';
import { CdkTableModule, DataSource } from '@angular/cdk/table';
import { Service } from '../../models/service';
import { MatTableDataSource } from '@angular/material';


@Component({
  selector: 'app-services-table',
  templateUrl: './services-table.component.html',
  styleUrls: ['./services-table.component.scss']
})
export class ServicesTableComponent implements OnInit {

  @Input() services: Service[];
  dataSource;
  displayedColumns = ['name', 'state', 'currentVersion', 'lastestVersion'];
  constructor() { }

  ngOnInit() {    
    this.dataSource = new ServiceDataSource(this.services);
  }

}

export class ServiceDataSource implements DataSource<any> {

  constructor(private services: Service[]) {    
  }

  connect(): Observable<Service[]> {
    return of(this.services);
  }

  disconnect() {
  }
}

HTML：

<div>
    <mat-table #table [dataSource]="dataSource">
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef>Service Name</th>
          <td mat-cell *matCellDef="let service">{{service.name}}</td>
        </ng-container>
        <ng-container matColumnDef="state">
          <th mat-header-cell *matHeaderCellDef>Service State</th>
          <td mat-cell *matCellDef="let service">{{service.state}}</td>
        </ng-container>
        <ng-container matColumnDef="currentVersion">
            <th mat-header-cell *matHeaderCellDef>Installed Version</th>
            <td mat-cell *matCellDef="let service">{{service.installedVersion}}</td>
        </ng-container>
          <ng-container matColumnDef="lastestVersion">
              <th mat-header-cell *matHeaderCellDef>Lastest Version</th>
              <td mat-cell *matCellDef="let service">{{service.lastestVersion}}</td>
          </ng-container>
          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

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

已经面对这一问题将近一天，无法解决。任何帮助都会得到真正的体现。