對Angular 2模板的JSON對象

我正在使用Angular 2來渲染一張地圖，其中包含我所在地區的商戶。我能夠從Yelp API成功獲取，但我在將其實施到我的模板時遇到了問題。我必須將對象轉換爲數組還是有解決方法？對Angular 2模板的JSON對象

map.component.ts

import { Component } from '@angular/core'; 
import { OnInit } from '@angular/core'; 

import { Marker } from '../../models/map/marker'; 
import { MapService } from '../../services/map/map.service'; 
import {Observable} from 'rxjs/Rx'; 
import {Http, Response, Headers } from '@angular/http'; 

@Component({ 
    moduleId: module.id, 
    selector: 'map-view', 
    templateUrl: 'map.component.html', 
    styleUrls: ['map.component.css'], 
}) 

export class MapComponent { 

    private markers = Object; 

    constructor(mapService: MapService) { 


     mapService.getMarkers() 
      .subscribe(
       markers => this.markers = markers, 
       error => console.error('Error: ' + error), 
       () => console.log(this.markers) 
      ); 
    } 

     marker = this.markers; 

}

map.service.ts

import { Injectable } from '@angular/core'; 
import { Headers, Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 


@Injectable() 
export class MapService { 

    private headers = new Headers(); 
    constructor(private http: Http) { } 



    getMarkers() { 
     this.headers.append("Access-Control-Allow-Origin", '*'); 
     this.headers.append("Access-Control-Allow-Methods", 'GET, POST, PATCH, PUT, DELETE, OPTIONS'); 
     this.headers.append("Access-Control-Allow-Headers", 'Origin, Content-Type, X-Auth-Token'); 
     this.headers.append("Authorization", 'Bearer ' + 'supersweetkey'); 
     return this.http.get('https://api.yelp.com/v3/businesses/search?location=lol&limit=50', { headers: this.headers}) 
      .map(response => response.json()); 
    } 

}

我的模板文件

<sebm-google-map [latitude]="42.975397" [longitude]="-82.382504" [mapDraggable]="false" [zoom]="13" [scrollwheel]="false" 
    [zoomControl]="false" [streetViewControl]="false"> 
</sebm-google-map> 
<ul> 
    <li *ngFor="let marker of markers">{{ marker.businesses}}</li> 
</ul>

我得到一個錯誤這樣。

Cannot find a differ supporting object 'function Object() { [native code] }' of type 'Object'. NgFor only supports binding to Iterables such as Arrays.

更多錯誤：

EXCEPTION: Error in http://localhost:3000/app/components/map/map.component.html:4:6 caused by: Cannot find a differ supporting object '[object Object]' of type 'Sitara Indian Cuisine'. NgFor only supports binding to Iterables such as Arrays. 
ErrorHandler.handleError @ core.umd.js:3488 
next @ core.umd.js:8375 
schedulerFn @ core.umd.js:7490 
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238 
SafeSubscriber.next @ Subscriber.ts:190 
Subscriber._next @ Subscriber.ts:135 
Subscriber.next @ Subscriber.ts:95 
Subject.next @ Subject.ts:61 
EventEmitter.emit @ core.umd.js:7476 
NgZone.triggerError @ core.umd.js:7837 
onHandleError @ core.umd.js:7798 
ZoneDelegate.handleError @ zone.js:233 
Zone.runTask @ zone.js:154 
ZoneTask.invoke @ zone.js:332 
core.umd.js:3490 ORIGINAL EXCEPTION: Cannot find a differ supporting object '[object Object]' of type 'Sitara Indian Cuisine'. NgFor only supports binding to Iterables such as Arrays. 
ErrorHandler.handleError @ core.umd.js:3490 
next @ core.umd.js:8375 
schedulerFn @ core.umd.js:7490 
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238 
SafeSubscriber.next @ Subscriber.ts:190 
Subscriber._next @ Subscriber.ts:135 
Subscriber.next @ Subscriber.ts:95 
Subject.next @ Subject.ts:61 
EventEmitter.emit @ core.umd.js:7476 
NgZone.triggerError @ core.umd.js:7837 
onHandleError @ core.umd.js:7798 
ZoneDelegate.handleError @ zone.js:233 
Zone.runTask @ zone.js:154 
ZoneTask.invoke @ zone.js:332 
core.umd.js:3493 ORIGINAL STACKTRACE: 
ErrorHandler.handleError @ core.umd.js:3493 
next @ core.umd.js:8375 
schedulerFn @ core.umd.js:7490 
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238 
SafeSubscriber.next @ Subscriber.ts:190 
Subscriber._next @ Subscriber.ts:135 
Subscriber.next @ Subscriber.ts:95 
Subject.next @ Subject.ts:61 
EventEmitter.emit @ core.umd.js:7476 
NgZone.triggerError @ core.umd.js:7837 
onHandleError @ core.umd.js:7798 
ZoneDelegate.handleError @ zone.js:233 
Zone.runTask @ zone.js:154 
ZoneTask.invoke @ zone.js:332 
core.umd.js:3494 Error: Cannot find a differ supporting object '[object Object]' of type 'Sitara Indian Cuisine'. NgFor only supports binding to Iterables such as Arrays. 
    at NgFor.ngOnChanges (http://localhost:3000/node_modules/@angular/common/bundles/common.umd.js:1649:31) [angular] 
    at Wrapper_NgFor.ngDoCheck (/CommonModule/NgFor/wrapper.ngfactory.js:49:20) [angular] 
    at CompiledTemplate.proxyViewClass.View_MapComponent0.detectChangesInternal (/AppModule/MapComponent/component.ngfactory.js:135:19) [angular] 
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12527:18) [angular] 
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12674:48) [angular] 
    at CompiledTemplate.proxyViewClass.View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:181:20) [angular] 
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12527:18) [angular] 
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12674:48) [angular] 
    at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:29:19) [angular] 
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12527:18) [angular] 
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12674:48) [angular] 
    at ViewRef_.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9775:24) [angular] 
    at eval (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:8642:71) [angular] 
    at Array.forEach (native) [angular] 
ErrorHandler.handleError @ core.umd.js:3494 
next @ core.umd.js:8375 
schedulerFn @ core.umd.js:7490 
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238 
SafeSubscriber.next @ Subscriber.ts:190 
Subscriber._next @ Subscriber.ts:135 
Subscriber.next @ Subscriber.ts:95 
Subject.next @ Subject.ts:61 
EventEmitter.emit @ core.umd.js:7476 
NgZone.triggerError @ core.umd.js:7837 
onHandleError @ core.umd.js:7798 
ZoneDelegate.handleError @ zone.js:233 
Zone.runTask @ zone.js:154 
ZoneTask.invoke @ zone.js:332 
core.umd.js:3497 ERROR CONTEXT: 
ErrorHandler.handleError @ core.umd.js:3497 
next @ core.umd.js:8375 
schedulerFn @ core.umd.js:7490 
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238 
SafeSubscriber.next @ Subscriber.ts:190 
Subscriber._next @ Subscriber.ts:135 
Subscriber.next @ Subscriber.ts:95 
Subject.next @ Subject.ts:61 
EventEmitter.emit @ core.umd.js:7476 
NgZone.triggerError @ core.umd.js:7837 
onHandleError @ core.umd.js:7798 
ZoneDelegate.handleError @ zone.js:233 
Zone.runTask @ zone.js:154 
ZoneTask.invoke @ zone.js:332 
core.umd.js:3498 DebugContext {_view: C…e.proxyViewClass, _nodeIndex: 5, _tplRow: 4, _tplCol: 6} 
ErrorHandler.handleError @ core.umd.js:3498 
next @ core.umd.js:8375 
schedulerFn @ core.umd.js:7490 
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238 
SafeSubscriber.next @ Subscriber.ts:190 
Subscriber._next @ Subscriber.ts:135 
Subscriber.next @ Subscriber.ts:95 
Subject.next @ Subject.ts:61 
EventEmitter.emit @ core.umd.js:7476 
NgZone.triggerError @ core.umd.js:7837 
onHandleError @ core.umd.js:7798 
ZoneDelegate.handleError @ zone.js:233 
Zone.runTask @ zone.js:154 
ZoneTask.invoke @ zone.js:332 
Subscriber.ts:241 Uncaught ViewWrappedError {_nativeError: Error: Error in http://localhost:3000/app/components/map/map.component.html:4:6 caused by: Cannot fi…, originalError: Error: Cannot find a differ supporting object '[object Object]' of type 'Sitara Indian Cuisine'. NgF…, context: DebugContext}

來源

2016-12-15 Lewis

嘗試讓標記的標記; – deek

@deek可悲的是這沒有工作:( – Lewis

什麼是錯誤？你可以console.log在.map。marker.business的響應可能只是錯誤的路徑。 – deek

基於commment：從雅虎

響應：對象的數組{業務：數組[50]，總：242}

private markers = []; 

    constructor(mapService: MapService) { 


     mapService.getMarkers() 
      .subscribe(
       markers => this.markers = markers[0].businesses, 
       error => console.error('Error: ' + error), 
       () => console.log(this.markers) 
      ); 
    } 

     marker = this.markers; 

}

now now code here。

<li *ngFor="let testMarker of markers">{{ testMarker.name}}</li>

來源

2016-12-16 00:08:45 deek

以下更新了我的最終答案我收到一個錯誤：由以下原因導致：無法讀取未定義的屬性'business' – Lewis

markers => {console.log（markers.business）; this.markers = markers;} ; 做出改變並告訴我你看到的是什麼 – deek

我得到一個Objects：Array [50 – Lewis

對Angular 2模板的JSON對象

回答

相關問題