observableを持つ角度呼び出しAPIがデータを表示しない

Question

Web APIからデータを取得するために、角度5のアプリケーションを実装しました。私はjsonを得るために観察可能なものを使用しています。私はサービスを作成している

{ 
"Job": [ 
{ 
    "Title": "Solution Architect", 
    "Summary": "Solution Architect", 
    "Salary": { 
    "MinValue": "100", 
    "MaxValue": "100", 
    "Text": "", 
    "Period": "HourlyRate" 
    },  
    "Reference": "234483_1", 
}, 
{ 
    "Title": "Senior Business Analyst – eCommerce ", 
    "Summary": "Senior Business Analyst...", 
    "Salary": { 
    "MinValue": "80", 
    "MaxValue": "100", 
    "Text": "", 
    "Period": "HourlyRate" 
    },  
    "Reference": "234874_1", 
} 
], 
"Advertiser": "Resourcing", 
"Source": "Wiz" 
} 

次のようになります：JSONは次のようになりますAPIからのコンポーネントがそのように見える

.... 
    @Injectable() 
    export class AdvDataService { 
    private _getAddsUrl = 'https://xx.xxxx.com/v1/adverts/www111'; 

constructor(private _http: Http) { } 

getAdvForClient(): Observable<IAdv> { 
    return this._http.get(this._getAddsUrl) 
    .map((response: Response) => <IAdv>response.json()) 
    .do(data => console.log('All:' + data)) 
    .catch(this.handleError); 
    } 

：

.... 
export class HomeComponent implements OnInit { 

constructor(private _sdvDataService: AdvDataService) { } 

private loadAdverts: IAdv; 
private errorMesage: string; 

ngOnInit() { 
this.errorMesage = ""; 
this._sdvDataService.getAdvForClient() 
    .subscribe(adv => { 
     this.loadAdverts = adv; 
     console.log ("here:" + this.loadAdverts) 
    }, error => { 
     this.errorMesage = <any>error;   
    }); 
} 

} 

私はシンプルを持っていますインタフェース：

export interface IAdv { 

Advertiser: string, 
Source:string 

} 

と私のhtml：私はJSONコンポーネントで、サービスの両方にconsole.logからコンソールに表示されるが、どのデータがビューに表示されて見ることができます

<div *ngIf="loadAdverts" > 
<div class="row justify-content-center"> 
    <div class="card" style="width: 20rem;"> 
    <div class="card-body"> 
     <h4 class="card-title">here: {{loadAdverts.Advertiser}}</h4> 
     <h6 class="card-subtitle mb-2 text-muted">{{loadAdverts.source}} </h6> 
     <p class="card-text">{{loadAdverts.source}}</p> 
     <a href="#" class="card-link">Card link</a> 
     <a href="#" class="card-link">Another link</a> 
    </div> 
    </div> 
</div> 

。

助けていただきありがとうございます。

更新：サーバーから来るjsonがjson文字列であるようです。したがって、観測可能な部分では解析されていません。私は、サスペンタでjson.parseを使用しなければなりませんでした。どのようにしてJSson文字列をjsonオブジェクトにパースすることができますか？

Answer 1

loadAdvertsはプライベート変数なので、テンプレートではアクセスできません。

このように公開します。

public loadAdverts:IAdv;

または使用ゲッターとセッター。

private _loadAdverts:IAdv; 
    .... 

get loadAdverts(): IAdv { 
return this._loadAdverts; 
} 

set loadAdverts(_ad: IAdv) { 
this._loadAdverts = _ad; 
} 

    .... 

Answer 2

我々が見ることができるように、あなたは、配列を含むオブジェクトJobを受けている、あなたがオブジェクトからその配列を抽出する必要がありますので：

getAdvForClient(): Observable<IAdv> { 
    return this._http.get(this._getAddsUrl) 
    .map((response: Response) => <IAdv>response.json().Job) // here! 
    .do(data => console.log('All:' + data)) 
    .catch(this.handleError); 
} 

また、あなたは配列を取得していることから、あなたのテンプレートでそれを反復処理したい：

<div *ngFor="let adv of loadAdverts"> 
    <p>{{adv.Source}}</p> 
    <!-- more code here --> 
</div> 

もありませんあなたのテンプレートではSourceの代わりにプロパティ名としてsourceを使用しました。