Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/33.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
使用angular 2将数据库中的数据提取到表中_Angular - Fatal编程技术网

使用angular 2将数据库中的数据提取到表中

使用angular 2将数据库中的数据提取到表中,angular,Angular,我想从数据库中获取数据并显示在数据表中。当我运行我的应用程序时,我在“网络”选项卡上看到已获取响应,但我没有显示在表中。这是我的密码 //Client.ts import {Component, OnInit} from '@angular/core'; import {HttpService} from "./Client_Service"; import {Response} from '@angular/http'; @Component({ selector: 'client',

我想从数据库中获取数据并显示在数据表中。当我运行我的应用程序时,我在“网络”选项卡上看到已获取响应,但我没有显示在表中。这是我的密码

//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>
{{welcome}
#
名字
姓氏
电子邮件
单位
可移动的
城市
网站
{{i+1}}
{{client.first{u name}
{{client.last_name}
{{client.email}
{{client.mobile}
{{客户.公司名称}
{{client.city}
{{client.website}
//堆栈跟踪

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

ClientComponent/您需要在组件中声明
客户端
,如下所示:

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

您需要在组件中声明
客户端
,如下所示:

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

您需要导入到项目中

您需要导入到项目中

您可以使用log
console.log(data.json())
但是分配
this.Clients=data
它不应该是json版本吗?@echonax,我不太清楚你的说法,但是如果我是对的,我已经将json版本设置为this.Clients=data行,结果仍然是一样的。我说,试着将它设置为
this.Clients=data.json()
@echonax,我刚试过。表仍然为空,但日志是否正确?然后尝试在html中放置安全导航操作符(?),如下所示:
{{{client?.first_name}}
log
console.log(data.json())
但是分配
this.Clients=data
它不应该是json版本吗?@echonax,我不太清楚你的说法,但是如果我是对的,我已经将json版本设置为this.Clients=data行,结果仍然是一样的。我说,试着将它设置为
this.Clients=data.json()
@echonax,我刚试过。表仍然为空,但日志是否正确?然后试着像这样在html中放置安全导航操作符(?):
{{{client?.first_name}
@ranakrnal9,什么都没发生!分享你们从API得到的回复。我刚刚发布了一个API回复的快照。我试图复制它,但没有工作,所以我发送了屏幕shot@ranakrnal9,什么也没发生!分享你们从API得到的回复。我刚刚发布了一个API回复的快照。我试图复制它,但没有工作,所以我发送了屏幕截图