Извлечь данные из базы данных в таблицу с угловыми 2

Question

Я хочу получить данные из своей базы данных и отобразить их в таблице данных. Когда я запускаю свое приложение, я вижу на вкладке сети ответ, который был получен, но я не показываю его в таблице. Вот мой код;

// Client.ts

import {Component, OnInit} from '@angular/core'; 
import {HttpService} from "./Client_Service"; 
import {Response} from '@angular/http'; 

@Component({ 
    selector: 'client', 
    templateUrl:'client_table.html', 
    providers:[HttpService] 
}) 

export class ClientComponent implements OnInit{ 
    welcome: string; 

    Clients: [{ 
    first_name:string, 
    last_name: string, 
    email: string, 
    company_name: string, 
    mobile: string, 
    city: string, 
    website:string 
    }]; 
    constructor(private httpService: HttpService){ 
    this.Clients = { 
     first_name:"", 
     last_name: '', 
     email: '', 
     mobile: '', 
     company_name: ' ', 
     city: '', 
     website:'.' 
    }[]; 
    } 

    ngOnInit(){ 
    this.httpService.getCustomer() 
    .subscribe(
     (data: any) =>{ 
     console.log(data.json()); 
     this.Clients = data 
     }) 
    } 
} 

// Http сервис

import {ClientComponent} from './Clients' 
import {Injectable} from '@angular/core'; 
import {Response, Http} from '@angular/http'; 
import 'rxjs/Rx'; 




@Injectable() 
export class HttpService{ 
    constructor(private http:Http){} 

    getCustomer(){ 
     //using get request 
     return this.http.get('http://localhost:9000/api/crm_api/v1/customers') 
     .map((response:Response) => response.json()); 
    } 
} 

// Html стол

<h1>{{welcome}}</h1> 
<table class="table"> 
    <tr> 
    <th>#</th> 
    <th>FirstName</th> 
    <th>LastName</th> 
    <th>Email</th> 
    <th>Company</th> 
    <th>Mobile</th> 
    <th>City</th> 
    <th>Website</th> 
    </tr> 
    <tr *ngFor="let client of Clients; let i = index"> 
    <td>{{i + 1}}</td> 
    <td>{{client.first_name}}</td> 
    <td>{{client.last_name}}</td> 
    <td>{{client.email}}</td> 
    <td>{{client.mobile}}</td> 
    <td>{{client.company_name}}</td> 
    <td>{{client.city}}</td> 
    <td>{{client.website}}</td> 
    </tr> 
</table> 

// трассировки стека

ClientComponent/<@http://localhost:4200/main.bundle.js:33304:25 
SafeSubscriber</SafeSubscriber.prototype.__tryOrUnsub@http://localhost:4200/main.bundle.js:632:13 
SafeSubscriber</SafeSubscriber.prototype.next@http://localhost:4200/main.bundle.js:581:17 
Subscriber</Subscriber.prototype._next@http://localhost:4200/main.bundle.js:534:9 
Subscriber</Subscriber.prototype.next@http://localhost:4200/main.bundle.js:498:13 
MapSubscriber</MapSubscriber.prototype._next@http://localhost:4200/main.bundle.js:10596:9 
Subscriber</Subscriber.prototype.next@http://localhost:4200/main.bundle.js:498:13 
XHRConnection/this.response</onLoad@http://localhost:4200/main.bundle.js:46041:21 
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:4200/main.bundle.js:101091:21 
NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:4200/main.bundle.js:30795:28 
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:4200/main.bundle.js:101090:21 
Zone$1</Zone</Zone.prototype.runTask@http://localhost:4200/main.bundle.js:100980:28 
ZoneTask/this.invoke@http://localhost:4200/main.bundle.js:101161:28 

Api response

Answer 1

Вы должны объявить Clients как ниже внутри компонента:

Clients: { 
    first_name:string, 
    last_name: string, 
    email: string, 
    company_name: string, 
    mobile: string, 
    city: string, 
    website:string 
}[]; 

Answer 2

Вы должны импортировать rxjs в свой проект.