CODEWITHSUNDEEP
htmlangulartypescriptrestangular-material
user12465043
user12465043

Reputation:

mat-table won't get filled with data from restservice

I am getting an array from my restservice. This is working and some information of the response I am printing on the page. But strangely I cannot fill my mat-table and I don't know why.The mat-table was working before, I am just not putting the data in it the right way. Every help will be appreciated.

table-paginator-component.ts:

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';
import {HttpService} from '../http.service';
import { HttpClient } from '@angular/common/http';
import {AreaCode} from '../models/areacode';


@Component({
  // tslint:disable-next-line: component-selector
  selector: 'table-paginator',
  styleUrls: ['table-paginator.component.css'],
  templateUrl: 'table-paginator.component.html',
})
export class TablePaginatorComponent implements OnInit {
  displayedColumns: string[] = ['standort', 'stammnummer', 'bereich'];


  products = [];


  dataSource = new MatTableDataSource<any>(this.products);

  constructor(private httpClient: HttpClient) {
    this.getAreaCodes();
  }

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
  }

  getAreaCodes() {






  this.httpClient.get('http://localhost:8080/phonenumbersmanagement/api/v1/areacodes/all')
.subscribe((res: 
any[]) => {
      console.log(res);
      this.products = res;
    });
  }

}

table-paginator.component.html:

<!-- <button (click)="getAreaCodes2()">GET /productss</button> -->

<ul>
  <li *ngFor="let product of products" >
-- id: {{product.id}}
-- name: {{product.title}}
-- base: {{product.base}}
  </li>
</ul> 

<div class="mat-elevation-z8">


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

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

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

  <!-- Weight Column -->
  <ng-container matColumnDef="bereich">
    <th mat-header-cell *matHeaderCellDef> Bereich </th>
    <td mat-cell *matCellDef="let element"> {{element.title}} </td>
  </ng-container>

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

<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>

Current Output:

enter image description here

Upvotes: 2

Views: 1072

Answers (4)

raharshi puli
raharshi puli

Reputation: 326

This thing worked for me. import table from angular/material and create an instance of it using viewchild. get your user data and set displayedColumns in ngOnInit(), In ngAfterContentChecked() you need to create MatTableDataSource instance and set this instance to table.dataSource in ngAfterViewInit() check below

import { MatTable, MatTableDataSource } from '@angular/material/table';

export class GetUserComponent implements OnInit {

@ViewChild(MatTable, {static:false}) table: MatTable<any>;
dataSource :any;


constructor(private appService:AppService){}

 ngOnInit() {
      this.appService.getUsers().subscribe(data => {
       this.userData= data;
      });
     this.displayedColumns = ['select','title','content'];
 }
 ngAfterViewInit() {

   this.table.dataSource = this.dataSource;
 }
 ngAfterContentChecked(){
    this.dataSource = new MatTableDataSource (this.userData);
  }
}

you can check my stackblitz here https://stackblitz.com/edit/angular-dynamicexamples

Upvotes: 0

Gangadhar Gandi
Gangadhar Gandi

Reputation: 2252

Change your getAreaCodes method like below,

getAreaCodes() {
  this.httpClient.get('http://localhost:8080/phonenumbersmanagement/api/v1/areacodes/all')
    .subscribe((res: any[]) => {
      this.products = res;
      this.dataSource = new MatTableDataSource(res);
    });
}

Update your mat-paginator with length as like property binding.

<mat-paginator [length]="products.length" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

Upvotes: 1

Aakash Bumiya
Aakash Bumiya

Reputation: 127

try with this.products = res; this.datasource.data = res;

Upvotes: 1

P&#233;ter
P&#233;ter

Reputation: 322

I think that, when you receive data from api and add result value to products variable then datasource variable dont update.

Try to use products variable on html table tag-> [dataSource]="products"

Upvotes: 0

Related Questions