Question

我有数据服务从我的api中获取数据：

       service = new google.maps.places.PlacesService(map);
        service.nearbySearch({ 
            location:  new google.maps.LatLng(imob[0],  imob[1]),
            radius: 500,
            type: ['pharmacy']
            },function callBack(results, status){   
            //cate tipuri de places primesc 
                markersP= []; 
                if (status == google.maps.places.PlacesServiceStatus.OK){
                    for (var i = 0; i < results.length; i++) {
                        createPharmaciesMarker(results[i]);
                    }   
                    //console.log(markersP.length + " " +imob[0]);
                    if( markersP.length !=0){
                        for(var i=0; i < markersP.length; ++i){
                            ++contor;
                            var latLng = [markersP[i].position.lat(), markersP[i].position.lng()];
                            queue.add(imob, latLng, 'pharmacy');        

                        }
                    }                   
                }
        });

和我的组件

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { HttpClient, HttpParams } from '@angular/common/http';

@Injectable()
export class DataService {

constructor(private http: HttpClient) { }

showProducts(){
return this.http.get('http://localhost:8000/api/v1/products');
}

}

和我的html compopnent：

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
//import { Products } from '../products';

@Component({
selector: 'app-products',
templateUrl: './products.component.html',
styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
products;

constructor(private data:DataService) { }

ngOnInit() {
this.showProducts();
}
showProducts() {
this.data.showProducts()
  .subscribe(res => this.products = res);
}

}

这里的问题是我在浏览器中运行代码时遇到此错误：

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

2- ERROR CONTEXT DebugContext_ {view：{...}，nodeIndex：21，nodeDef：{...}，elDef：{...}，elView：{...}}

Answer 1

试试这个可能会有所帮助，也可以看到console.log值

 showProducts() {
          this.data.showProducts().subscribe(res => {
                 this.products = res;
                console.log(this.products);
           });
  }

Answer 2

我怀疑来自后端的回复。

showProducts() {
this.data.showProducts()
  .subscribe(res => this.products = res);
}

在这里查看“res”。它可能不是数组，因此也就是产品。

Answer 3

您对API的回复必须是JSON格式，否则您应该在服务中明确声明respondType。类似的东西：

   apiUrl = 'http://localhost:8000/api/v1/products'
   showProducts() {
        return this.http.get<Product[]>(this.apiUrl, {observe: 'response', 
   resposeType: 'text'});
   }

您的DOM或组件似乎没有错。

Answer 4

尝试这种方式它将有所帮助，并且还优化并检查控制台日志值

showProducts(): void {
  this.data.showProducts().subscribe(( this.products: any) => {
    console.log(this.products); 
    });
  }

如何通过角度5从api获取数据

4 个答案: