異なるコンポーネントで非同期環境でアイテムを取得するにはどうすればよいですか？

Question

私は（輸入なし）このコードの主なコンポーネントがあります：テンプレートで

class AppComponent { 
    products = null; 
    productsUpdated = new EventEmitter(); 

    constructor(product_service: ProductService) { 
     this._product_service = product_service; 

     this._product_service.getList() 
      .then((products) => { 
       this.products = products; 
       this.productsUpdated.emit(products) 
      }); 
    } 
} 

： 製品をソートするための<left-sidenav [productsReceived]="productsUpdated"></left-sidenav>

とコンポーネント：すべてが描画されるときに

class LeftSidenavComponent { 
    @Input() productsReceived; 
    @Output() productsSorted = new EventEmitter(); 

    categories = [] 

    constructor(product_list_service: ProductListService) { 
     this._product_list_service = product_list_service; 
    }    
    ngOnInit() { 
     this.productsReceived.subscribe((products) => { 
      this.categories = products.map((elem) => { 
       return elem.category 
      }) 
     }); 
    } 
} 

を、categoriesLeftSidenavComponentの配列は空です。 イベントエミッタは、LeftSidenavComponentよりも早く起動しますが、それを処理する方法はわかりません。

Answer 1

私はあなたが

@Injectable() 
    export class DrinksService { 
    drinkSelected = new EventEmitter<any>(); 
    drinkChanged = new EventEmitter<any>(); 
    drinksToggle = new EventEmitter<any>(); 
} 

上記のコードは、私のプロジェクトの一つの例ですが、ちょうど変数名を変更するように注入されているサービスにEventEmitter年代を動かすことをお勧めします。

テンプレートを使用してproductsReceivedを変更するのではなく、ngOnInitのeventEmittersに登録するだけです。

現在、あなたのコードはイベントエミッタproductsUpdatedへのデータバインディングを使用していますが、[productsReceived]="productsUpdated"のデータバインドを単純に行うことができます。productsUpdatedは空のリストです。 productsUpdatedに値が設定されると、DOMに反映されます。あなたは

this.myEmitter 
    .subscribe(
     (data)=>this.productsUpdated = data 
    ); 

はこのヘルプをい...などのエミッターイベントをサブスクライブすることによって productsUpdatedを移入する必要がありますか？主なものは、イベントエミッタではなく、リストにデータバインドすることです。