角2コンポーネントはサービスからデータを取得できません

Question

状況は非常に単純です - 角度2サービスからデータを取得しようとしていますが、ターゲット配列は常に空です。 apiへの呼び出しがデータとステータス200を返し、コンソールにエラーがないことがわかります。 は、ここに私の基本的なサービスです。

import {Injectable} from "@angular/core"; 
import {Http, Response} from '@angular/http'; 

@Injectable() 
export class DataService { 
    items = []; 
    constructor(private http:Http) { 
     this.loadItems(); 
    } 
    loadItems() { 
     this.http.get('http://localhost:58928/api/front') 
      .map((res: Response) => { 
       return res.json(); 
      }) 
    } 
} 

そして、ここでコンポーネントです：

import {Component, Input} from '@angular/core'; 
import {DataService} from './../../services/data-service'; 

@Component({ 
    selector: 'items-list', 
    template: ` 
     <div class="container"> 
    <div class="items" *ngFor="let item of items|sort:'DESC';let i = index;trackBy: item?.id"> 
    <a href="/items/{{item.id}}"> 
     <mdl-card class="demo-card-square" mdl-shadow="2" mdl-card-expand> 
     <mdl-card-media> 
     <img src="{{item.imgUrl}}" alt="{{item.name}}" style="max-width: 100%"> 
     </mdl-card-media> 
      <mdl-card-title mdl-card-expand> 
       <h2 mdl-card-title-text>{{item.name}}</h2> 
      </mdl-card-title> 
      <mdl-card-supporting-text> 
       {{item.shortDescription}} 
      </mdl-card-supporting-text> 
      <mdl-card-actions mdl-card-border> 
       <h6 class='mdl-color-text--grey-600'>От {{item.priceFrom}} рублей.</h6> 
      </mdl-card-actions> 
     </mdl-card> 
     </a> 
    </div> 
</div> 
`, 
    styles: [ 
     ` 
.container { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: space-around; 
    align-content: space-around; 
    align-items: stretch; 
    width: 100%; 
} 

.items{ 
    margin: auto; 
    padding-top: 1%; 
    padding-bottom: 1%; 
} 

a { 
text-decoration: none; 
} 

` 
    ] 
}) 

export class ItemsList { 
    @Input() items = []; 
    constructor(private dataService: DataService) { 
     this.items = dataService.items; 
    } 
} 

基本的に

Answer 1

、あなたが行う場合は、この：

@Injectable() 
export class DataService { 
    items = []; 
    constructor(private http:Http) { 
     this.loadItems(); 
    } 
    loadItems() { 
     this.http.get('http://localhost:58928/api/front') 
      .map((res: Response) => { 
       return res.json(); 
      }) 
    } 
} 

あなたは、あなたのWeb APIを呼び出すだけマップあなたは何にも割り当てません。たぶん、あなたはこのようにそれを変更することができます。

@Injectable() 
export class DataService { 
    items = []; 
    constructor(private http:Http) { 
     this.loadItems(); 
    } 
    loadItems() { 
     this.http.get('http://localhost:58928/api/front') 
      .map((res: Response) => { 
       return res.json(); 
      }).subscribe(data => this.items = data); 
    } 
} 

今回、とすぐにデータがあるとして、itemsは、それらが含まれています。しかし、このようにするのは最適ではありません。なぜなら、HTTP呼び出しが完了する前にコンポーネントがロードされる可能性があるからです。この場合、空の配列も取得されます。最高ののは、observable（mapによって返される）を返し、コンポーネントをサブスクライブしたり、itemsが初期化されたときに発生する新しいobservableを作成することです。ここで

は最初の可能性の例である：http://plnkr.co/edit/DD8fqa2dJGksCtOlolO2?p=preview

このアプローチは動作しますが、これだけの事はあなたが二回「loadItems」を呼び出す場合、HTTPコールが二回行われることになるということです。キャッシングが必要な場合は、Observablesでより高度なものを開発する必要があります。