Angular : No Error but not showing data in Material Table

Question

I have no error in my console, but not able to display it in Material Data Table. Looking in the code for a while but can't figure it out. The only thing that comes to my mind is that the API is not right. xxxxx represents some URL of API. Uniformly I'm not allowed to show the real link.

restaurant.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Restaurant } from '../models/restaurant.model';

@Injectable({
  providedIn: 'root'
})
export class RestaurantService {
  private restaurantsUrl = 'https://xxxxxx/getAllServices.php';

  constructor(private http: HttpClient) { }

  getRestaurants(): Observable<Restaurant[]> {
    return this.http.get<Restaurant[]>(this.restaurantsUrl);
  }
}

restaurant-table.component.ts

import { Component, ViewChild,OnInit } from '@angular/core';
import { RestaurantService } from '../services/restaurant.service';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import {DataSource} from '@angular/cdk/collections';
import { Restaurant } from '../models/restaurant.model';


@Component({
  selector: 'app-restaurants-table',
  templateUrl: './restaurants-table.component.html',
  styleUrls: ['./restaurants-table.component.css']
})

export class RestaurantsTableComponent implements OnInit {

  dataSource = new RestaurantDataSource(this.restaurantService);
  displayedColumns = ['id', 'ime_restorana', 'opis', 'broj_telefona', 'adresa_restorana','edits'];

  constructor(private restaurantService: RestaurantService) {
}

  ngOnInit() {
  }

}

export class RestaurantDataSource extends DataSource<any> {

  constructor(private restaurantService: RestaurantService) {
    super();
  }

  connect(): Observable<Restaurant[]> {
    return this.restaurantService.getRestaurants();
  }

  disconnect() {}

}

restaurant-table.component.html

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

    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
      <mat-cell *matCellDef="let restaurant"> {{ restaurant.id }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="ime_restorana">
      <mat-header-cell *matHeaderCellDef> Naziv </mat-header-cell>
      <mat-cell *matCellDef="let restaurant"> {{ restaurant.ime_restorana }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="opis">
      <mat-header-cell *matHeaderCellDef> Opis </mat-header-cell>
      <mat-cell *matCellDef="let restaurant"> {{ restaurant.opis }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="broj_telefona">
      <mat-header-cell *matHeaderCellDef> Broj Telefona </mat-header-cell>
      <mat-cell *matCellDef="let restaurant"> {{ restaurant.broj_telefona }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="adresa_restorana">
      <mat-header-cell *matHeaderCellDef> Adresa </mat-header-cell>
      <mat-cell *matCellDef="let restaurant"> {{ restaurant.adresa_restorana }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="edits">
      <th mat-header-cell *matHeaderCellDef></th>   
      <td mat-cell *matCellDef="let element"> 
        <button mat-raised-button class="edit-btn"><mat-icon>edit</mat-icon></button> 
        <button mat-raised-button class="edit-btn"><mat-icon>remove_red_eye</mat-icon></button> 
      </td>
    </ng-container>

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

  </mat-table>
</div>

And user.model.ts

export interface User {
    name: string;
    email: string;
    phone: string;
    company: {
        name: string;
    }
}

getRestaurants() returns an Observable. So try this.http.get<Restaurant[]>(this.restaurantsUrl).subscribe(res => console.log(res)) and have a look to the output. — Dnl
– Dnl, Commented Apr 24, 2019 at 14:26
@DaniR I added this.http.get(this.restaurantsUrl).subscribe(res => console.log(res)) as you suggested, and for output, I get object inside which is array I looking for. when I type ...console.log(res.restorani) I got what I need. thank you. Now, I'm really new to Angular, so I would pressure if you can say me how to get that array into dataSource in component.ts and display it in the component.html — seven
– seven, Commented Apr 25, 2019 at 19:37

bugs · Accepted Answer · 2019-04-24 14:29:21Z

2

Your current dataSource is an instance of the RestaurantDataSource class, what you want (I imagine), is the actual list of the restaurants, hence

dataSource = new RestaurantDataSource(this.restaurantService).connect();

However, your connect() method returns an Observable, not the list itself, so you need to use the async pipe in your template

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

answered Apr 24, 2019 at 14:29

bugs

15.4k6 gold badges53 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular : No Error but not showing data in Material Table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related