遍历对象数组Angular 2 [英] Iterate through an array of objects Angular 2

问题描述

我在服务文件中从json文件接收到一个对象数组.当我在组件中订阅它并尝试对其进行迭代时，出现以下错误:

I have an array of objects received in service file from a json file. When I subscribe it in the component and try to iterate through it, I am getting the following error:

EXCEPTION: Error in app/dashboard/features/fleet/fleetControlPanel/fleetControlPanelTemplate.html:38:14BrowserDomAdapter.logError @ browser_adapter.ts:78BrowserDomAdapter.logGroup @ browser_adapter.ts:89ExceptionHandler.call @ exception_handler.ts:53(anonymous function) @ application_ref.ts:304schedulerFn @ async.ts:131SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:117NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.ts:138NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.ts:90ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.ts:100NgZone.runGuarded @ ng_zone.ts:216outsideHandler @ dom_events.ts:16ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423
EXCEPTION: TypeError: Cannot read property 'length' of undefined

TypeError: Cannot read property 'length' of undefined
        at FleetSummaryComponent.ngOnChanges (fleetSummaryComponent.ts:62)
        at DebugAppView._View_FleetControlPanelComponent2.detectChangesInternal (FleetControlPanelComponent.template.js:755)
        at DebugAppView.AppView.detectChanges (view.ts:243)
        at DebugAppView.detectChanges (view.ts:345)
        at DebugAppView.AppView.detectContentChildrenChanges (view.ts:261)
        at DebugAppView._View_FleetControlPanelComponent0.detectChangesInternal (FleetControlPanelComponent.template.js:326)
        at DebugAppView.AppView.detectChanges (view.ts:243)
        at DebugAppView.detectChanges (view.ts:345)
        at DebugAppView.AppView.detectViewChildrenChanges (view.ts:267)
        at DebugAppView._View_FleetOperateComponent2.detectChangesInternal (FleetOperateComponent.template.js:891)

TypeError: Cannot read property 'length' of undefined
    at FleetSummaryComponent.ngOnChanges (http://localhost:3000/app/dashboard/features/fleet/fleetSummary/fleetSummaryComponent.js:46:41)
    at DebugAppView._View_FleetControlPanelComponent2.detectChangesInternal (FleetControlPanelComponent.template.js:755:61)
    at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:200:14)
    at DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:289:44)
    at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:215:37)
    at DebugAppView._View_FleetControlPanelComponent0.detectChangesInternal (FleetControlPanelComponent.template.js:326:8)
    at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:200:14)
    at DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:289:44)
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/node_modules/@angular/core/src/linker/view.js:220:34)
    at DebugAppView._View_FleetOperateComponent2.detectChangesInternal (FleetOperateComponent.template.js:891:8)

有人可以告诉我，这是什么错误，还是有其他迭代方法?谢谢

Can someone tell me, what is the mistake or is there any other way to iterate? Thanks

服务文件

import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class FleetSummaryService {

    private url = 'app/dashboard/features/fleet/fleetControlPanel/fleetdataBase.json';

    constructor(private _http: Http){

    }

    getFleetSummary(): Observable<any[]> {
        return this._http.get(this.url)
        .map((response: Response) => <any[]>response.json())
        .do(data => console.log("Data received: " + JSON.stringify(data)))
        .catch(this.handleError);

    }

    private handleError(error: Response){
        console.error(error)
        return Observable.throw(error.json().error || "Server error");
    }
}

组件文件

import {Component, OnInit, Input, OnChanges} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
import {FleetSummaryService} from './fleetSummaryService';

@Component({
    selector: 'fleetSummary',
    templateUrl: 'app/dashboard/features/fleet/fleetSummary/fleetSummaryTemplate.html',
    directives: [ROUTER_DIRECTIVES]

})

export class FleetSummaryComponent implements OnInit, OnChanges {

     fleetSummary: any[];
   @Input() selectedTruckID: any;
   errorMessage: any;
   summary: any[];

    // constructor to loop the products in product service file and disply in html
    constructor(private _fleetSummaryService: FleetSummaryService){


    }
    // render something initially 
    ngOnInit(): void {



    }
    // render something on constant changes
    ngOnChanges(): void{

         console.log("data inside fleet summary:  ", this.selectedTruckID.fleetId)

    this._fleetSummaryService.getFleetSummary()
             .subscribe(
                 fleetSummary => this.summary = fleetSummary,

                 error => this.errorMessage = <any>error)

              console.log(" fleet summary:  ", this.summary)

                for (var i = 0; i < this.summary.length; i++) {

                    var summaryData = this.summary[i];
                   console.log(" fleet summary ID:  ", summaryData.fleetId)
                    if (summaryData.fleetId == this.selectedTruckID.fleetId) {

                        this.fleetSummary = summaryData;
                       console.log(this.fleetSummary);
                        break;

                    }else {
                        this.fleetSummary = null;
                    }
         }

    }

}

推荐答案

您在这里有一个异步方法:

You have an asynchronous method here:

   this._fleetSummaryService.getFleetSummary()
             .subscribe(
                 fleetSummary => this.summary = fleetSummary,

                 error => this.errorMessage = <any>error)

在此之后，您尝试在此处进行遍历:

and after this you are trying to iterate over it here:

for (var i = 0; i < this.summary.length; i++) {

您的代码将在订阅响应到达之前进入for循环.因此this.summary将是未定义的.

Your code will be in the for loop before the response from your subscription arrives. Hence this.summary will be undefined.

如果您想遍历响应到达时，则应将for循环移动到回调内部，如下所示:

If you want to iterate through the response when it arrives you should move your for loop inside the callback like this:

 this._fleetSummaryService.getFleetSummary()
             .subscribe(
                 (fleetSummary) => {
                      this.summary = fleetSummary;
                      console.log(" fleet summary:  ", this.summary);

                      for (var i = 0; i < this.summary.length; i++) {

                         var summaryData = this.summary[i];
                         console.log(" fleet summary ID:  ", summaryData.fleetId);
                         if (summaryData.fleetId == this.selectedTruckID.fleetId) {

                            this.fleetSummary = summaryData;
                            console.log(this.fleetSummary);
                            break;

                         }else {
                           this.fleetSummary = null;
                         }
                    }
                 },

                 error => this.errorMessage = <any>error);

这篇关于遍历对象数组Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！