顯示來自JSON的數據使用Angular 2 - Observable和異步

我有一個簡單的Angular 2服務調用本地JSON文件。我可以在general.service.ts的.map函數中將對象傳遞給console.log。但是，由於異步調用的性質，我似乎無法從對象中打印出單個鍵或值。這是我的代碼。顯示來自JSON的數據使用Angular 2 - Observable和異步

我知道我需要包含* ngIf，因爲它是異步的。然而，即使我已經使用了ngIf與 'generalInfo' 它引用component.ts

general.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 

import { General } from '../interfaces/general.interface' 

@Injectable() 
export class GeneralService { 
    private dataAPI = '../../assets/api.json'; 

    constructor(private http: Http) { 

    } 

    getGeneralData() : Observable<General> { 
    return this.http.get(this.dataAPI) 
     .map((res:Response) => { res.json(); console.log(res.json())}) 
     .catch((error:any) => Observable.throw(error.json().error ||  'Server error')); 
    } 
}

header.component.ts

import { Component, OnInit, DoCheck } from '@angular/core'; 
import 'rxjs/add/operator/map'; 
import { GeneralService } from '../../services/general.service'; 

@Component({ 
    selector: 'header', 
    templateUrl: `./header.component.html` 
}) 

export class headerComponent implements OnInit{ 

    public generalInfo : any; 
    public name : string; 

    constructor(
    private headerblock: GeneralService 
) {} 

    //Local Properties 
    header; 

    loadHeader() { 
    this.headerblock.getGeneralData() 
     .subscribe(
     generalInfo => { 
      this.generalInfo = generalInfo; 
      this.name = this.generalInfo.name 
     }, 
     err => { 
      console.log(err); 
     } 
    ); 

    } 

    ngOnInit() { 
    this.loadHeader(); 
    } 
}

header.component .html

<div class="container"> 
    <div *ngIf="generalInfo"> 
    {{name}} 
    </div> 
</div>

雖然此代碼 - 它不會進入if狀態NT。我不知道爲什麼這不起作用？

來源

2017-04-21 Sam Kelham

你在哪裏指定'name'？ – echonax

@echonax我試圖將它分配在.subscribe，generalInfo函數中 –

您將'generalInfo'分配給'this.generalInfo'，但是'name'分配給了什麼？ – echonax

*ngIf未執行，原因是您的map功能不返回任何內容。

因此，在您的subscribe-功能中，輸入值爲undefined！

你有你的地圖功能中返回的東西：

.map((res:Response) => { console.log(res.json()); return res.json(); })

且模板中，使用這樣的：

{{ generalInfo.name }}

假設generalInfo有一個名爲name屬性。

來源

2017-04-21 10:48:34 mxii

絕對釘上它。您的解決方案奏效謝謝！當定時器允許我時， –

將接受答案 –

顯示來自JSON的數據使用Angular 2 - Observable和異步

回答

相關問題