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;
    }
}

Answer 1

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">