如何在異步環境中獲取不同組件中的項目？

我有這個代碼主要成分（不含進口）：如何在異步環境中獲取不同組件中的項目？

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 
      }) 
     }); 
    } 
}

所以，當所有的繪製，categories數組LeftSidenavComponent爲空。我認爲productUpdated事件發射器會在LeftSidenavComponent之前觸發，但不知道如何處理它。

來源

2017-08-16 graver

嘗試此調整以開頭@Output（）productsUpdated = new EventEmitter（）;如果您仍然遇到問題，請創建一個運動員。 – JGFMK

我建議[不要在承建商內部有承諾]（https://stackoverflow.com/q/24398699/1048572）。問題與發射事件相同。 – Bergi

我建議移動EventEmitter的該服務已注入喜歡

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

上面的代碼是從我的一個項目的例子，但只是改變變量名。

這種方式而不是依靠HTML模板來修改productsReceived，您只需訂閱ngOnInit中的eventEmitters。

目前，您的代碼正在使用數據綁定到事件發佈器productsUpdated，但您可以簡單地綁定數據綁定[productsReceived]="productsUpdated"，其中productsUpdated是一個空列表。一旦productsUpdated填充了值，它將反映在DOM中。您可以通過訂閱發射像一個事件來填充productsUpdated ...

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

這是否幫助？主要是將數據綁定到一個列表，而不是事件發佈器。

來源

2017-08-16 20:05:26

如何在異步環境中獲取不同組件中的項目？

回答

相關問題