Angular2サブコンポーネントhtmlはロード後にリフレッシュされませんか？

Question

まず、私はangular2についていないので、些細な質問であれば申し訳ありません。私はいくつかのコードをサブコンポーネントに入れようとしています。私は多くのことを試みましたが、私はこのことを理解できないようです。

http getとsubscribeを使用してjsonからいくつかの結果を取得しようとしています。私の理解は、ビューが作成された後にデータが読み込まれることです。私は自分の見解でデータを見ることができますが、コンポーネント内のデータを表示するコードを記述しようとするたびにデータを見ることができます。動いていない。

データを表示するには、found-itemsコンポーネントの外側にngForを置き、サブコンポーネントに1つのアイテムを表示します。しかし、配列をサブコンポーネントに転送するときにデータを表示できない理由を本当に理解したいと思います。

角度は、ページが最初に読み込まれたときに配列が定義されていないため、サブコンポーネントの変更を検出しないようです。

すべてのコードはGitHubで利用できます。

私の親コンポーネントのHTMLコードは以下の通りです：

<div class="container"> 
 
    <h1>Narrow Down Your Chinese Menu Choice</h1> 
 
    <div class="form-group"> 
 
     <input type="text" placeholder="search term" class="form-control" [(ngModel)]="searchTerm"> 
 
    </div> 
 
    <div class="form-group narrow-button"> 
 
     <button class="btn btn-primary" (click)="narrowItDown()">Narrow It Down For Me!</button> 
 
    </div> 
 
<ol> 
 
    <li *ngFor="let item of menuItems; let i = index; "> 
 
     {{ item.short_name }} : {{ item.name }} : {{ item.description }} 
 
     <button (click)="remove(i)">Don't want this one!</button> 
 
    </li> 
 
</ol> 
 
<found-items [items]='menuItems'></found-items> 
 
</div>

-項目見つかった部品が何も表示されません。しかし、アプリコンポーネントはです。

私の親コンポーネントTSコードは以下の通りです：

import {Component,Output,OnInit} from '@angular/core'; 
 
import {MenuSearchService,MenuItem} from '../../services/menu-search-service'; 
 
import {Observable} from 'rxjs/Rx'; 
 
import { FoundItemsComponent } from '../../components/founditems/founditems.component'; 
 

 
@Component({ 
 
    selector: 'narrow-application', 
 
    templateUrl: `app/components/application/app.html`, 
 
}) 
 
export class NarrowItDownComponent { 
 
    @Output() menuItems:MenuItem[]; 
 
    searchTerm:string=""; 
 
    constructor(private menuSearchService: MenuSearchService) { 
 
    } 
 
    public getMatchedMenuItems(searchTerm:string){ 
 
     return this.menuSearchService.getMatchedMenuItems(searchTerm); 
 
    } 
 

 
    public narrowItDown(){ 
 
     console.log("searchTerm:"+this.searchTerm) 
 
     this.menuItems=this.getMatchedMenuItems(this.searchTerm); 
 
    } 
 

 
    public remove(index:number){ 
 
     console.log("index: "+index) 
 
     this.menuItems.splice(index,1); 
 
    } 
 

 

 
    
 
}

私は私のデータがngOnChanges方法でサブコンポーネントで利用可能であることがわかります。

import {Component,Input,Output,AfterViewInit, ViewChild,ChangeDetectionStrategy,EventEmitter,ViewEncapsulation } from '@angular/core'; 
 
import {MenuSearchService,MenuItem} from '../../services/menu-search-service'; 
 
import {Observable} from 'rxjs/Rx'; 
 
import { NarrowItDownComponent } from '../../components/application/app.component'; 
 

 
@Component({ 
 
    selector: 'found-items', 
 
    templateUrl: `app/components/founditems/founditems.html`, 
 
}) 
 
export class FoundItemsComponent { 
 
    @Input('items') private items:MenuItem[]; 
 
    @Input('position') private position:number; 
 

 
    constructor() { 
 
    } 
 

 
    remove() { 
 
     console.log('remove'+this.position); 
 
    } 
 

 
    ngOnChanges(...args: any[]) { 
 
     console.log('changing', args); 
 
     console.log(this.items); 
 
    } 
 

 
}

データを返すサービスコードがある：

getMatchedMenuItems(searchTerm: string): MenuItem[] { 
var elements: MenuItem[] = []; 
this.http.get(this.constantService.API_ENDPOINT + "/menu_items.json") 
    .flatMap((response) => response.json()['menu_items']) 
    .filter((menu_item) => menu_item.description.toLowerCase().indexOf(searchTerm) !== -1) 

    .subscribe(

    (menu_item) => { 
    console.log(menu_item); 
    elements.push(new MenuItem(
     menu_item.id, 
     menu_item.short_name, 
     menu_item.name, 
     menu_item.description, 
     menu_item.price_small, 
     menu_item.price_large, 
     menu_item.small_portion_name, 
     menu_item.large_portion_name)); 
    } 

    , 
    function (error) { console.log("Error happened" + error) }, 
    function() { console.log("the subscription is completed") } 
); 

console.log("el :" + elements); 
return elements; 

}

getMatchedMenuItems

Answer 1

私は、私は次のようになり、あなたの問題を、見つけたと思うので、あなたのNarrowItDownComponentOnInitを実装してい子コンポーネントがレンダリングされたときにデータが利用可能でないことを示します。

<div *ngIf="menuItems"> 
    <found-items [items]='menuItems'></found-items> 
</div> 

そして、あなたの親から削除します：

は、私は、これはトリックを行うべきだと思う

あなたは、子から親に戻っていくつかのデータを送信する場合は、出力のみが必要とされている

@Output() menuItems:MenuItem[]; 

。

ngOnInit() { 
    this.menuSearchService.getMatchedMenuItems(yourSearchTerm) 
     .subscribe(items => { 
      // Your logic here 
     }); 
} 

そして私はあなたが行ってもいいと思います：muzurBucuが示唆したように、この他に

は、やります！ :)

Answer 2

が加入自体を行っています。観測可能なポンプが非同期的にポピュレートされている場合とそうでない場合がある要素のリストを返します。

getMatchedMenuItemsは、観測可能なストリーム（すべてサブスクライブまで）を返す必要があります。

あなたのコンポーネントでが初期化されたらにして、この観測可能なストリームを購読したいとします。

class NarrowItDownComponent implements OnInit { 

そして、今ngOnInitメソッド内で観察可能なストリームを返すサービスのメソッドにサブスクリプションを作成します：

ngOnInit() { 
    this.menuSearchService.getMatchedMenuItems(yourSearchTerm) 
          .subscribe(items => { 
           // Your logic here 
          }); 
}