我擁有相同的JSON數據，我保存在.ts（硬編碼）和.json（http get）中。兩個對象在開發控制檯中都是一樣的。Angular2奇怪的硬編碼對象vs http.get對象問題

我可以使用「{{beatlesjson | json}}」和「{{beatlesjson.paul | json}}」打印輸出從外部JSON獲取的數據，但我無法打印出「{{beatlesjson.paul.name | json }}「，它打破了進一步的應用程序執行。

如果在TS文件中使用相同的JSON但硬編碼，則以前的paragraf按預期工作。

PS。我注意到，如果我沒有啓動，我甚至不能打印對象和第一個子對象：beatlesjson：Object = {};原來。但它只適用於頂級和第一級，但在對象的第二級上打破。

import {Component,ElementRef,AfterViewChecked,enableProdMode} from 'angular2/core'; enableProdMode(); 
import {Http, Response, RequestOptions, Headers, HTTP_PROVIDERS, HTTP_BINDINGS} from 'angular2/http'; 

@Component({ 
    selector: 'my-app', 
    template: ` 

     <pre> 

     WORKS {{ beatles | json }} 
     WORKS {{ beatlesjson | json }} 
     <hr> 

     WORKS {{ beatles.paul | json }} 
     WORKS {{ beatlesjson.paul | json }} 
     <hr> 

     WORKS {{ beatles.paul.name | json }} 
     <!-- BREAKS FURTHER EXEC, DOES NOT WORK {{ beatlesjson.paul.name | json }} --> 
     <hr> 

     </pre> 

    ` 
}) 

export class AppComponent { 

    beatles: Object = {}; 
    beatlesjson: Object = {}; 

    constructor(http: Http){ 

     this.beatles = { 
      john: { 
       name: 'John Lennon', 
       description: 'Imagining all the people', 
       deceased: true 
       }, 
      paul: { 
       name: 'Paul McCartney', 
       description: 'Believes in Yesterday', 
       deceased: false 
       }, 
      george: { 
       name: 'George Harrison', 
       description: 'His guitar gently weeps', 
       deceased: true 
       }, 
      ringo: { 
       name: 'Ringo Starr', 
       description: 'Going to put him in the movies', 
       deceased: false 
      } 
     } 

      http.get('app/beatles.json') 
      .subscribe(
       data => { this.beatlesjson = data.json() }, 
       err => console.log(err), 
       () => console.log(this.beatlesjson) 
      ); 




    } 




}

來源

2016-03-03 Milan Milanovic

那麼拋出了什麼錯誤？你真的需要那個'name'的過濾器嗎？ – charlietfl

嘗試elvis運算符，因爲在加載數據之前paul屬性可能爲null，「{{beatlesjson.paul？.name | json}}' – Chandermani

您可以使用Elvis操作符的這種行爲，以防止：

{{ beatlesjson?.paul?.name | json }

你的問題的原因是數據通過一個HTTP請求異步接收。所以beatlesjson屬性在開始時是未定義的。

來源

2016-03-03 06:10:22

它現在可以工作，只需要「貓王」即可完成所有的同步。再次感謝蒂埃裏;） –

-1

這是因爲構造函數體在內插html之前執行。所以beatles.paul存在。

快速修復：

相反的：做：

{{ beatlesjson && beatlesjson.paul && beatlesjson.paul.name | json }}

爲了確保您不會錯誤地訪問一個成員了一些undefined。

來源

2016-03-03 00:16:17 basarat

Angular2奇怪的硬編碼對象vs http.get對象問題

回答

快速修復：

相關問題