角从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 }, ]; } } 

现在我希望能够访问此数据，然后将其显示在角度数据表中...

我可以在这里从以下部分访问数据：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

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

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

如果要使用数据源，请查看此线程 。

Answer 2

看起来您缺少列定义

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

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