Question

我是棱角分明的新人。我创建了一个服务类，以json格式返回产品详细信息。

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
      )
  }
}

现在我在组件类中调用了这个服务的 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);
  }

}

现在我想打印HTML页面中的所有数据。这就是我试图打印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>

但不幸的是，它会因为错误和错误而抛出

错误错误：无法找到'object'类型的不同支持对象'[object Object]'。 NgFor仅支持绑定到Iterables，例如Arrays。

Answer 1

您需要首先将public details声明为数组

public details: any[];

在您的异步请求返回任何内容之前，除非您指定，否则您的模板对details的数据类型一无所知。
我认为这就是你得到这样的错误的原因。

找不到不同的支持对象＆＃39; [object Object]＆＃39;类型＆＃39;对象＆＃39 ;. NgFor仅支持绑定到Iterables，例如Arrays。

另外，将subscribe部分放在组件代码中

Answer 2

在ngOnInit中，您不需要将返回值分配给this.details，因为当您拨打电话时，请求将具有可观察的订阅。您将获得可观察到的成功响应，因此需要成功设置this.details值，如下所示：

ngOnInit() {
    this.api.fetchData().subscribe(response => this.details = response;);
    console.log(this.details);
}

Answer 3

您的组件不知道fetchData的类型，您应该输入它 fetchData():Observable<Product[]> {

您不应该在fetchData()订阅您的observable，只返回可观察的

fetchData():Observable<Product[]> {
    return this.http.get('http://funiks.com/qbook/api/productmasterjson.php')
    .map((response) => response.json()
  )
}

在您的组件中，订阅observable并输入details

details: Product[];
ngOnInit() {
    this.api.fetchData().subscribe(data => this.details = data);
    console.log(this.details);
}

Angular - 无法使用* ngFor

3 个答案: