对象http请求中的角JSON对象

我试图访问Json对象，我正在获取数据。但它显示错误。我怎样才能获得的数据没有任何错误对象http请求中的角JSON对象

ERROR TypeError: Cannot read property 'DATA' of undefined 
    at Object.View_DosminusComponent_0._co [as updateDirectives] (DosminusComponent.html:3) 
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13075) 
    at checkAndUpdateView (core.es5.js:12255) 
    at callViewAction (core.es5.js:12620) 
    at execComponentViewsAction (core.es5.js:12552) 
    at checkAndUpdateView (core.es5.js:12261) 
    at callViewAction (core.es5.js:12620) 
    at execComponentViewsAction (core.es5.js:12552) 
    at checkAndUpdateView (core.es5.js:12261) 
    at callWithDebugContext (core.es5.js:13475) 


// Component 

import { DosminusService } from './../services/dosminus.service'; 
import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-dosminus', 
    templateUrl: './dosminus.component.html', 
    styleUrls: ['./dosminus.component.css'] 
}) 
export class DosminusComponent implements OnInit { 

    dosMinusData: any; 
    constructor(private dosminusService: DosminusService) { 

    } 

    ngOnInit() { 
    this.dosminusService.getDosMinusRecords() 
    .subscribe(response => { 
     this.dosMinusData = response.json(); 
    }) 
    } 

} 





//Service 
import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 

@Injectable() 
export class DosminusService { 

    constructor(private http: Http) { 

    } 

    getDosMinusRecords(){ 
    return this.http.get('assets/Jsondata/dosminus.json'); 
    } 

} 

//JSON 

{ 
    "DATA":{ 
     "kpiValue":"10", 
     "kpiColor":"#A21313" 
    } 
} 

<div class="e2e-dosminus"> 
    <div class="dosminus-center"> 
    <div class="dosminus-number-circle" [ngStyle]="{'backgroundColor': dosMinusData.DATA.kpiColor}"> 
    {{ dosMinusData.DATA.kpiValue }} 
    </div> 
    </div> 
    <h4> Dos(-) </h4> 
</div>

来源

2017-09-02 Arun

参见教程，https://stackoverflow.com/q/39755336/3001761和几十比猫王运营商，如果你问我更清洁其他“无法读取属性[不管]未定义”的问题。 – jonrsharpe

{{dosMinusData？.DATA.kpiValue}} –

[Angular2：无法读取未定义的属性'name']的可能重复（https://stackoverflow.com/questions/39755336/angular2-cannot-read-property-name-未定义） – Alex

我认为可观察+异步管的方法是（？）：

export class DosminusComponent implements OnInit { 

    dosMinusData$: Observable<any>; 
    constructor(private dosminusService: DosminusService) { 

    } 

    ngOnInit() { 
    this.dosMinusData$ = this.dosminusService.getDosMinusRecords(); 
    } 
} 

<ng-container *ngIf="dosMinusData$ | async as dosMinusData"> 
    <div class="dosminus-number-circle" [ngStyle]="{'backgroundColor': 
    dosMinusData.DATA.kpiColor}"> 
    {{ dosMinusData.DATA.kpiValue }} 
    </div> 
</ng-container> 

@Injectable() 
export class DosminusService { 

    constructor(private http: Http) { 

    } 

    getDosMinusRecords(){ 
    return this.http.get('assets/Jsondata/dosminus.json').map(r => r.json()); 
    } 

}

来源

2017-09-02 15:09:44

仍然有相同的错误 – Arun

@Arun更新，检查http请求是否返回 –

现在工作正常，没有错误。感谢兄弟为你的时间。 – Arun

使用安全导航操作?，以避免错误，如果数据不存在

<div class="dosminus-number-circle" [ngStyle]="{'backgroundColor': dosMinusData.DATA.kpiColor}"> 
    {{ dosMinusData?.DATA?.kpiValue }} 
</div>

来源

2017-09-02 15:01:05 Sajeetharan

数据存在。使用安全导航操作员后仍然显示错误 – Arun

对象http请求中的角JSON对象

回答

相关问题