Angular - issue with asynchronous data stream

Question

i've been stuck with this problem, here according to my analysis i found that the data is being retrieved after the data is needed in the html page. i have a component(loans.component.ts) and a html(loans.component.html) page where the component uses a service(loan.service.ts) for getting the data from the api. i am getting the following error:

Unhandled Promise rejection: Error in http://localhost:3000/app/components/loans/loans.component.html:71:61 caused by: Cannot read property 'custName' of undefined ; Zone: <root> ; Task: Promise.then ; Value: ViewWrappedError {_nativeError: Error: Error in http://localhost:3000/app/components/loans/loans.component.html:71:61 caused by: Can…, originalError: TypeError: Cannot read property 'custName' of undefined

at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12731:48)
at ViewRef_.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9800:24)
at eval (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:8702:71)
at Array.forEach (native)
at ApplicationRef_.tick (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:8702:29)



TypeError: Cannot read property 'custName' of undefined
at CompiledTemplate.proxyViewClass.View_LoansComponent0.detectChangesInternal (/AppModule/LoansComponent/component.ngfactory.js:412:77)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12584:18)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12731:48)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12569:22)
at CompiledTemplate.proxyViewClass.View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:36:19)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12584:18)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12731:48)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12569:22)

And the console log that i have used is printing out the objects present in the data at the end of the console.

here is my loan.component.ts:

import { Component } from '@angular/core';
import { LoanService } from '../../services/loans.service';
import { Loan } from '../../../loan';
@Component({
    moduleId: module.id,
    selector: 'loans',
    templateUrl: './loans.component.html',
    providers: [LoanService]
})

export class LoansComponent{

loans : Loan[];
custName: any;

constructor(private loanService: LoanService){
    this.getloans();
};

getloans(){
    this.loanService.getLoan()
        .subscribe(loans => {
            this.loans = loans;
            console.log(loans);
        });

}
};

loan.service.ts:

import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs/Observable';
import {Loan} from '../../loan'

@Injectable()
export class LoanService{
    constructor(private http:Http){
        console.log('loan service initiated..');
    }

    getLoan(): Observable<Loan[]>{
        return this.http.get('http://localhost:3500/loansnew')
            .map(res => res.json());
    }
}

In my html template i am trying to print out the data present in the loan and i am getting the above mentioned error. edit:

<div ng-repeat="loan in loans">
    loan: {{loan.LoanId}}
    customer: {{loan.custName}}
    vehincle number: {{loan.vehiclenum}}
    telecaller: {{loan.tId}}
</div>

Answer 1

Shouldn't it be:

<div *ngFor="let loan of loans"> // this here!
    loan: {{loan.LoanId}}
    customer: {{loan.custName}}
    vehincle number: {{loan.vehiclenum}}
    telecaller: {{loan.tId}}
</div>

ng-repeat is for AngularJS