非同期データストリームの角度問題

Question

私はこの問題に悩まされています。私の分析によれば、データがHTMLページにデータが必要とされた後に取得されています。 私はコンポーネント（loans.component.ts）とAPIからデータを取得するためのHTML（loans.component.html）コンポーネントがサービスを使用しているページ（loan.service.ts）を持っています。次のエラーが表示されます。

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) 

コンソールログは、コンソールの最後にあるデータに存在するオブジェクトを表示しています。

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：私のHTMLテンプレートで

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()); 
    } 
} 

私はローンに存在するデータを印刷しようとしていますし、ここに

は私loan.component.tsです私は上記のエラーが発生しています。 編集：

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

Answer 1

が、それはすべきではない：

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

ng-repeatはあなたにもHTMLビューファイルを更新することができAngularJS