使用angular 2将数据库中的数据提取到表中
我想从数据库中获取数据并显示在数据表中。当我运行我的应用程序时,我在“网络”选项卡上看到已获取响应,但我没有显示在表中。这是我的密码 //Client.ts使用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',
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
}[];
您需要导入到项目中 您需要导入到项目中 您可以使用logconsole.log(data.json())
但是分配this.Clients=data
它不应该是json版本吗?@echonax,我不太清楚你的说法,但是如果我是对的,我已经将json版本设置为this.Clients=data行,结果仍然是一样的。我说,试着将它设置为this.Clients=data.json()
@echonax,我刚试过。表仍然为空,但日志是否正确?然后尝试在html中放置安全导航操作符(?),如下所示:{{{client?.first_name}}
logconsole.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回复的快照。我试图复制它,但没有工作,所以我发送了屏幕截图