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导入项目中。

从数据库中获取数据到角度为2的表中

2 个答案: