Angular从Service.component获取数据到mat-table

Question

我在Angular App中创建了一个服务。 tournament.service.ts：

import {
  Injectable
} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TournamentsService {

  constructor() {}

  getTurnaments() {
    return [{
        date: 1288323623006,
        club: 'D',
        name: 1.0079,
        flight: 1,
        archers: 1,
        scoring: 1,
        awards: 0
      },
      {
        date: 1288323623006,
        club: 'Helium',
        name: 4.0026,
        flight: 2,
        archers: 2,
        scoring: 2,
        awards: 0
      },
      {
        date: 1288323623006,
        club: 'Lithium',
        name: 6.941,
        flight: 3,
        archers: 3,
        scoring: 3,
        awards: 0
      },
      {
        date: 1288323623006,
        club: 'Beryllium',
        name: 9.0122,
        flight: 1,
        archers: 4,
        scoring: 4,
        awards: 0
      },
      {
        date: 1288323623005,
        club: 'Boron',
        name: 10.811,
        flight: 3,
        archers: 5,
        scoring: 5,
        awards: 0
      },
      {
        date: 1288323630066,
        club: 'Carbon',
        name: 12.0107,
        flight: 2,
        archers: 6,
        scoring: 6,
        awards: 0
      },
      {
        date: 1288323623006,
        club: 'Nitrogen',
        name: 14.0067,
        flight: 1,
        archers: 7,
        scoring: 7,
        awards: 0
      },
      {
        date: 1288323630068,
        club: 'Oxygen',
        name: 15.9994,
        flight: 4,
        archers: 8,
        scoring: 8,
        awards: 0
      },
      {
        date: 1288323630069,
        club: 'Fluorine',
        name: 18.9984,
        flight: 5,
        archers: 9,
        scoring: 9,
        awards: 0
      },
      {
        date: 11288323230060,
        club: 'Neon',
        name: 20.1797,
        flight: 2,
        archers: 10,
        scoring: 10,
        awards: 0
      },
      {
        date: 1288323630069,
        club: 'Fluorine',
        name: 18.9984,
        flight: 5,
        archers: 9,
        scoring: 9,
        awards: 0
      },
      {
        date: 11288323230060,
        club: 'Neon',
        name: 20.1797,
        flight: 2,
        archers: 10,
        scoring: 10,
        awards: 0
      },
    ];
  }
}

现在我希望能够访问这些数据，然后在角度数据表中显示它...

我可以在这里访问这部分的数据：eventmanagement.component.ts：

import {Component, OnInit} from '@angular/core';
import {TournamentsService} from '../../tournaments.service';

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

  constructor(private _TurnamentService: TournamentsService) {  }

  public Turnaments = [];

  ngOnInit() {
    this.Turnaments = this._TurnamentService.getTurnaments();
  }
}

虽然我目前仍然坚持如何让它显示在像这样的席子表（https://material.angular.io/components/table/examples）

这是我正在尝试上班的表：eventmanagement.component.html：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="date">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Date</b></h2>
    </th>
    <td mat-cell *matCellDef="let Turnament"> {{Turnament.date | date:'yyyy-MM-dd Z'}} </td>
  </ng-container>
  <!-- Name Column -->
  <ng-container matColumnDef="club">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Club</b></h2>
    </th>
    <td mat-cell *matCellDef="let Turnament"> {{Turnament.club}} </td>
  </ng-container>
  <!-- Weight Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Name</b></h2>
    </th>
    <td mat-cell *matCellDef="let Turnament"> {{Turnament.name}} </td>
  </ng-container>
  <!-- Symbol Column -->
  <ng-container matColumnDef="flight">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Flight</b></h2>
    </th>
    <td mat-cell *matCellDef="let Turnament"> {{Turnament.flight}} </td>
  </ng-container>
  <ng-container matColumnDef="archers">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Archers</b></h2>
    </th>
    <td mat-cell *matCellDef="let Turnament"> {{Turnament.archers}} </td>
  </ng-container>
  <ng-container matColumnDef="scoring">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Scoring</b></h2>
    </th>
    <td mat-cell *matCellDef="let Turnament"> {{Turnament.scoring}} </td>
  </ng-container>
  <ng-container matColumnDef="awards">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Awards</b></h2>
    </th>
    <td mat-cell *matCellDef="let Turnament"> {{Turnament.awards}} </td>
  </ng-container>
  <tr style="background-color: lightsteelblue; font-weight: bold" mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onRowClicked(row)"></tr>
</table>

Answer 1

看起来您缺少列定义

尝试在组件中声明它们，如下所示：

displayedColumns = ['date', 'club', 'name', 'flight', 'archers', 'scoring', 'awards'];

Answer 2

你必须像这样绑定Turnaments到表：

<table mat-table [dataSource]="Turnaments" class="mat-elevation-z8">

如果您想使用数据源，请查看this thread。