[英]Angular - Unable to print json data in HTML page using *ngFor
I am new to angular. 我是新手。 I have created a services class that returns a product details in json format.
我创建了一个服务类,以json格式返回产品详细信息。
api.service.ts api.service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class ApiService {
constructor(private http: Http) { }
fetchData() {
return this.http.get('http://funiks.com/qbook/api/productmasterjson.php').map(
(response) => response.json()
).subscribe(
(data) => data
)
}
}
Now i called this service in component class api.component.ts 现在,我在组件类api.component.ts中调用了此服务
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';
@Component({
selector: 'app-api',
templateUrl: './api.component.html',
styleUrls: ['./api.component.css']
})
export class ApiComponent implements OnInit {
public details;
constructor(private api:ApiService) { }
ngOnInit() {
this.details = this.api.fetchData();
console.log(this.details);
}
}
Now i want to print all the data in HTML page. 现在我想在HTML页面中打印所有数据。 This is what i have tried to print the json data
这就是我试图打印json数据的内容
<tr *ngFor="let d of details">
<td>{{d.CATEGORY}}</td>
<td>{{d.HSN}}</td>
<td>{{d.ID}}</td>
<td>{{d.NAME}}</td>
<td>{{d.POSTINGHEAD}}</td>
<td>{{d.PRODUCTSERVICE}}</td>
<td>{{d.RATE}}</td>
<td>{{d.SACCODE}}</td>
<td>{{d.TAX_CONNECTED}}</td>
<td>{{d.TYPE}}</td>
<td>{{d.UNIT}}</td>
</tr>
But unfortunately it throws as error and error is like 但不幸的是,它抛出错误和错误就像
ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'.
错误错误:找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor only supports binding to Iterables such as Arrays.
NgFor仅支持绑定到Iterables,例如数组。
You need to declare your public details
as an array first of all 首先,您需要将
public details
声明为数组
public details: any[];
Before your async request returns anything, your template doesn't know anything about the datatype of details
unless you specify it. 在异步请求返回任何内容之前,除非您指定模板,否则您对模板的
details
的数据类型一无所知。
I think that's why you are getting such error. 我认为这就是为什么您会收到这样的错误。
Cannot find a differ supporting object '[object Object]' of type 'object'.
找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor only supports binding to Iterables such as Arrays.
NgFor仅支持绑定到Iterables,例如数组。
Also, put your subscribe
part inside your component code 另外,将您的
subscribe
部分放入组件代码中
In your ngOnInit
, you don't need to assign the return value to this.details as the when you are making get call the requests will have observable subscription. 在您的
ngOnInit
,您无需将返回值分配给this.details,因为在进行get调用时,请求将具有可观察的订阅。 You will get a response in observable success so setting this.details value in success is needed as follows: 您将获得可观察到的成功响应,因此设置this.details值需要成功,如下所示:
ngOnInit() {
this.api.fetchData().subscribe(response => this.details = response;);
console.log(this.details);
}
Your component doesn't know the type of the fetchData
, you should type it with fetchData():Observable<Product[]> {
您的组件不知道
fetchData
的类型,应使用fetchData():Observable<Product[]> {
You shouldn't subscribe to your observable in fetchData()
, just return the observable 您不应该在
fetchData()
订阅您的可观察fetchData()
,只需返回可观察对象
fetchData():Observable<Product[]> { return this.http.get('http://funiks.com/qbook/api/productmasterjson.php') .map((response) => response.json() ) }
In your component, subscribe to the observable and type details
在组件中,订阅可观察和输入的
details
details: Product[]; ngOnInit() { this.api.fetchData().subscribe(data => this.details = data); console.log(this.details); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.