Angular

Question

我一直被这个问题困扰，这里根据我的分析我发现在html页面需要数据之后正在检索数据。我有一个组件 (loans.component.ts) 和一个 html(loans.component.html) 组件使用的页面用于从 api 获取数据的服务（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)

我使用的控制台日志打印出控制台末尾数据中存在的对象。

这是我的 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());
    }
}

在我的 html 模板中，我试图打印出贷款中存在的数据，但出现上述错误。编辑：

<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 用于 AngularJS

Angular - 异步数据流问题

Angular - issue with asynchronous data stream

javascript

angularjs

angular2-observables