从数据库获取数据到角度数据表

时间:2016-12-28 19:40:42

标签: angular

我有一些数据存储在我的数据库中,我想要获取并放置在我的角度数据表中,但它没有解决,我找不到原因。虽然,我在构造函数中创建的实例显示在我的角度表中,但我希望能够将我的数据库中存储的数据请求到我的角度数据表中。谢谢!

customer.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{

  welcome: string;
  clients: [{
     Name: string,
     Email: string,
     Company: string

  }];

  constructor(){
    this.welcome = "Customer Listing"
    this.clients = [{
      Name: "John Jan",
      Email:"example.com",
      Company: "Metabo"
    }

    ]

  };



   customers:Customer[];

   constructor(private httpService: HttpService){}

  ngOnInit(){


    this.httpService.getCustomer()
      .subscribe(
        (data: Response ) => console.log(data.json())
      );

  }




}

//我的角度数据表

<h1>{{welcome}}</h1>
<table class="table">

  <tr>
    <th>#</th>
    <th> Name</th>
    <th>Email</th>
    <th>Company</th>



 </tr>
    <tr *ngFor="let client of clients; let i = index">
      <td>{{i + 1}}</td>
      <td>{{client.Name}}</td>
      <td>{{client.Email}}</td>
      <td>{{client.Company}}</td>

    </tr>


</table>

// Http服务

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


@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())



   }





}

1 个答案:

答案 0 :(得分:3)

如果

 this.httpService.getCustomer()
      .subscribe(
        (data: Response ) => console.log(data.json())
      );

正在运作,您所要做的就是:

 this.httpService.getCustomer()
      .subscribe(
        (data: Response ) => {
          console.log(data.json())
          this.clients = data;
       }
      );