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 trythis.http.get<Restaurant[]>(this.restaurantsUrl).subscribe(res => console.log(res))
and have a look to the output.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