對象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對象

回答

相關問題