Stworzyłem usługę w mojej kątowej aplikacji. turnament.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
      },
    ];
  }
}

Teraz chcę mieć dostęp do tych danych, a następnie wyświetl go w tabelach danych kątowych ...

Mogę uzyskać dostęp do danych z tej części tutaj: 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();
  }
}

Chociaż obecnie utknąłem, jak zdobyć go w tabelach mat (HTTPS: // Materiał .Wzór.io / komponenty / tabela / przykłady)

To jest mój stół, próbuję dotrzeć do pracy: 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>
2
ArcherMark 25 luty 2019, 00:47

2 odpowiedzi

Najlepsza odpowiedź

Wygląda na to, że brakuje Ci definicji kolumn

Spróbuj zadeklarować je w komponencie, tak jak:

displayedColumns = ['date', 'club', 'name', 'flight', 'archers', 'scoring', 'awards'];
3
ambs 24 luty 2019, 22:19

Musisz powiązać Turnaments do tabeli taka:

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

Jeśli chcesz użyć źródła danych, zamiast tego spójrz na To Wątek.

3
Baboo_ 24 luty 2019, 22:14