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

Question

我在 Angular 应用程序中创建了一项服务。 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
      },
    ];
  }
}

现在我希望能够访问此数据，然后将其显示在 angular 数据 tables...

我可以在这里访问这部分的数据： 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();
  }
}

尽管我目前还在研究如何让它像这样显示在垫子 table 中 (https://material.angular.io/components/table/examples)

这是我的 table 我正在尝试开始工作： 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

您必须像这样将 Turnaments 绑定到 table：

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

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

Answer 2

您似乎缺少列定义

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

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

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

Angular get data from Service.component into mat-table

javascript

angular-services

angular

mat-table