Question

我正在使用Angular 2来渲染我所在地区周围的商家的地图。我能够成功从Yelp API中获取，但是在将其实现到我的模板中时遇到了问题。我是否必须将对象转换为数组或是否有解决方法？

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}

Answer 1

基于提交：

来自雅虎的回应：对象数组{业务：数组[50]，总数：242}

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

现在在这里更改代码。

{{1}}

JSON对象到Angular 2模板

1 个答案: