将数据显示为角度2数据表

Question

我已经能够从我的数据库中获取数据，这些数据只显示在浏览器的控制台中。我特别想要做的是，显示提取到我创建的angular 2表中的数据。我已经有一段时间了。善意的帮助。下面是我的代码。

我的http服务

 import {Response, Http} from '@angular/http';
 import {DataListModule} from 'primeng/primeng';

 @Injectable()    
 export class HttpService {

      constructor(private http:Http) {}

      getData() {
           //using get request
           return this.http.get('example.com')
                .map((response: Response) => response.json())    
      }
 }

我的组件

 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 GameComponent {

      Games: [{
           EAsports: string,
           Konami: string,
           Country:string,
           BestGame: string,
      }];

      constructor(private httpService: HttpService){
           this.Games = [{    
                EAsports: " FIFA",
                Konami: "PES",
                Country:"CHINA",
                BestGame: "FIFA 17"
           }]
      }

      ngOnInit() {

           this.httpService.getData()
                .subscribe((data: any) => {
                     console.log(data.json())
                     this.Games = data;
                })    
      }
 }

我的表

 <tr>
    <th>#</th>
    <th>FIFA 17</th>
    <th>PES 17</th>
    <th>ORIGIN</th>
    <th>CALL OF DUTY</th>
 </tr>

 <tr *ngFor="let game of Games; let i = index">
      <td>{{i + 1}}</td>
      <td><a href="#" >{{game.EAsports}}</a></td>
      <td>{{game.Konami}}</td>
      <td>{{game.Country}}</td>
      <td>{{game.BestGame}}</td>
  </tr>