Блог

У меня есть два связанных компонента, в родительском компоненте я подписываюсь на получение данных о продукте

 getProductData(productId) {
    this.magB1BaseService.getProductById(productId)
      .pipe(
        tap(response => {
          if (response.Success amp;amp; response.Data != null) {
            this.Product = response.Data as Product;
            console.log('Product Data==>', this.Product);
            this.productMedia = this.Product.Media;
            this.prepareMediaFileList();
            this.getAttributeSetAttributes(this.Product.AttributeSet);
          } else {
            this.notification.error('Error', response.Errors[0]);
          }
        })
      )
      .subscribe();
  }
 

и передача значения из объекта product в дочерний компонент

 <app-mag-b1-category
              [(recordValue)]="Product.Categories"
              (AddCategory)="addCategory($event)"
              (DeleteCategory)="deleteCategory($event)">
</app-mag-b1-category>
 

и внутри дочернего компонента (categoryComponent) Я вызываю функцию для обработки входящего значения от родительского компонента.

 mapRecordValues() {
    if (this.recordValue != null) {
      const selectedCategories = this.recordValue as ProductCategory[];
      selectedCategories.forEach(cat => {
        const category = this.AllCategories.find(x => x.Id === cat.CategoryID);
        const test = this.transformer(category, 1);
        test.selected = true;
        this.selectListSelection.toggle(test);
        this.dataSource._flattenedData.subscribe(data => {
          const obj = data.find(z => z.Id === category.Id);
          if (obj != null) {
            obj.selected = true;
            this.selectListSelection.toggle(obj);
          }
        });
        this.dataSource._expandedData.subscribe(data => {
          const obj = data.find(z => z.Id === category.Id);
          if (obj != null) {
            obj.selected = true;
            this.selectListSelection.toggle(obj);
          }
        });
      });
      this.selectedCategoriesToSend = Object.assign([], this.recordValue);
      this.selectedCategoriesCount = this.selectedCategoriesToSend.length;
    }
  }
}
 

Моя проблема заключается в том, что функция (MapRecordValues) вызывается до инициализации родительского компонента, а значение, передаваемое дочернему компоненту, всегда равно null

Нам нужен ngOnChanges() метод жизненного цикла, чтобы получить последнее обновленное входное значение от родительского компонента.

Попробуйте добавить его, как показано ниже,

category.component.ts :

 ngOnChanges(changes: SimpleChanges): void {
    if (changes.recordValue.currentValue amp;amp; changes.recordValue.currentValue.length) {
         this.mapRecordValues();
    }
}