Usando la tabla de datos de diseño de material angular, necesito obtener datos de una API REST y mostrar la respuesta en la tabla.

Pero tengo problemas para mostrar los datos en la tabla.

Modal.ts

export interface ReleaseModal {
    results: [{
        id: number;
        title: string;
    }]
} 

Service.ts

  getReleaseNotes(): Observable<ReleaseModal[]> {
      return this.http.get<ReleaseModal[]>(this.url);
  } 

component.ts

export class ReleasesComponent implements OnInit, AfterViewInit{
  title = 'Release notes';
  displayedColumns = ['releasenotes'];
  dataSource;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor ( private releaseNotes: ReleaseService ) {}

  ngOnInit() {
    this.releaseNotes.getReleaseNotes()
    .subscribe(data => {
      this.dataSource = new MatTableDataSource(data);
      console.log(data);
    });
  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }
}

HTML

  <mat-table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="releasenotes">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Release Notes </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.results.title}}% </mat-cell>
    </ng-container>

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

Cuando registro en la consola el data, pude ver los resultados, pero no estoy seguro de por qué no se muestra en la tabla. Por favor ayuda

A continuación se muestra la respuesta de muestra, que obtengo de la llamada a la API

{
"results": [
{
"id": "203901655",
"title": "Test Page",
},
....
}
1
aw3123 16 oct. 2018 a las 18:04

2 respuestas

La mejor respuesta

Cambie ngOnInit como se muestra a continuación, debería solucionarlo:

dispalyedColumns=['title']
ngOnInit() {
    this.releaseNotes.getReleaseNotes()
    .subscribe(data => {
      this.dataSource = new MatTableDataSource(data.results);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      console.log(data);
    });
}

Elimina las líneas en ngAfterViewInit. El problema es que se llama a ngAfterViewInit antes de recibir datos del servicio y dataSource aún no está definido.

Html:

<ng-container matColumnDef="title">
  <mat-header-cell *matHeaderCellDef mat-sort-header> Release Notes </mat-header-cell>
  <mat-cell *matCellDef="let row"> {{row.title}}% </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>
1
User3250 16 oct. 2018 a las 16:17

Prueba éste:

export class ReleasesComponent implements OnInit, AfterViewInit{
  title = 'Release notes';
  displayedColumns = ['releasenotes'];
  dataSource = new MatTableDataSource<ReleaseModal>();

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor ( private releaseNotes: ReleaseService ) {}

  ngOnInit() {
    this.releaseNotes.getReleaseNotes()
    .subscribe(data => {
      this.dataSource.data = data;
      console.log(data);
    });
  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }
}
0
SEY_91 16 oct. 2018 a las 16:05