CODEWITHSUNDEEP
angularhtml-tableangular-material
Rodolfo
Rodolfo

Reputation: 338

Data not showing in angular table

I can't get the table rows to show, only the header will show ( here you can see the problem ). The problem probably resides in the Http request. I got a service that makes an http request to get data from an API:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class SequencesService {

  constructor(private http: HttpClient) { }

  public getData(){
    return this.http.get("https://bgpie.net/api/rrc/00/sequence?limit=20&page=1");
  }
}

Then a component has this code and sends everything to the html document:

import {animate, state, style, transition, trigger} from '@angular/animations';
import {SequencesService} from '../sequences.service';
import {Sequences} from '../sequences';
import {MatTableDataSource} from '@angular/material/table';

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

  ELEMENT_DATA: Sequences[] = [];
  displayedColumns: string[] = ['Sequence ID', 'Prefix', 'RRC', 'Start Time', 'End Time'];
  dataSource = new MatTableDataSource<Sequences>(this.ELEMENT_DATA);

  constructor(private service: SequencesService) { }

  ngOnInit(): void {
    this.getAllSequences();
  }

  public getAllSequences(){
    let resp = this.service.getData();
    resp.subscribe(report => this.dataSource.data = report as Sequences[]);
  }

}

This is the html document:

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

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- Position Column -->
  <ng-container matColumnDef="Sequence ID">
    <th mat-header-cell *matHeaderCellDef> Sequence ID </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="Prefix">
    <th mat-header-cell *matHeaderCellDef> Prefix </th>
    <td mat-cell *matCellDef="let element"> {{element.prefix}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="RRC">
    <th mat-header-cell *matHeaderCellDef> RRC </th>
    <td mat-cell *matCellDef="let element"> {{element.rRC}} </td>
  </ng-container>

  <ng-container matColumnDef="Start Time">
    <th mat-header-cell *matHeaderCellDef> Start Time </th>
    <td mat-cell *matCellDef="let element"> {{element.start}} </td>
  </ng-container>

  <ng-container matColumnDef="End Time">
    <th mat-header-cell *matHeaderCellDef> End Time </th>
    <td mat-cell *matCellDef="let element"> {{element.end}} </td>
  </ng-container>

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

Upvotes: 2

Views: 2278

Answers (1)

Zunayed Shahriar
Zunayed Shahriar

Reputation: 2723

First, report as Sequences[] is wrong.

Because your required array is nested, in property items.

Second, there is also an issue with calling the API with parameters.

I've also corrected the API calling at SequencesService.

Check out the result at Stackblitz.

Upvotes: 2

Related Questions