Angular подписка работает не так, как я ожидал

Question

Итак, у меня есть страница магазина с дочерним компонентом FilterBarComponent и onInit. Я хочу, чтобы он выдавал всю категорию, поскольку по умолчанию я хочу, чтобы все продукты в магазине отображались, но на моем homePageComponent у меня есть кнопка, которая позволяет пользователь должен перейти на страницу магазина и просмотреть определенную категорию c, например, кнопку с надписью «просмотреть рубашки». Моя проблема в том, что массив категорий по умолчанию возникает после завершения функции подписчика, а также в подписчике эмиттер событий не срабатывает. Вот еще один мой вопрос, связанный с этой проблемой. Angular EventEmitter не излучает в подписчике

FilterBarComponent

  categories = [];

  @Output() filteredCategory = new EventEmitter<any>();
  @Output() maxiumPriceEmitter = new EventEmitter<any>();
  categorySub: Subscription;
  formatLabel(value: number) {
    return 'R' + value;
  }

  constructor(private shopService: ShopService) {}

  ngOnInit() {
    this.initCategories();
    this.filterCategories();
    this.updateCategories();
  }

filterCategories() {
    this.shopService.filterCategories.subscribe(
        (fCategory: string) => {
        this.categories.map(category => {
            category.checked = category.name === fCategory;
          });
        this.updateCategories();
        });
  }
  initCategories() {
    this.categories = [
      { name: 'dress', checked: true, displayName: 'Dresses' },
      { name: 'top', checked: true, displayName: 'Shirts' },
      { name: 'skirt', checked: true, displayName: 'Skirts/Pants' },
      { name: 'purse', checked: true, displayName: 'Purse' },
      { name: 'bag', checked: true, displayName: 'Bags' },
    ];

  }

  updateCategories() {
    const categories = this.categories
      .filter((category) => {
        return category.checked;
      });
    console.log(categories);
    this.filteredCategory.emit(categories);
  }

в консоли сначала я получаю правильный результат, но затем массив категорий сбрасывается

[{}]
{name: "top", checked: true, displayName: "Shirts"}

[{…}, {…}, {…}, {…}, {…}]
{name: "dress", checked: true, displayName: "Dresses"}
1: {name: "top", checked: true, displayName: "Shirts"}
2: {name: "skirt", checked: true, displayName: "Skirts/Pants"}
3: {name: "purse", checked: true, displayName: "Purse"}
4: {name: "bag", checked: true, displayName: "Bags"}
length: 5

Наблюдаемое в ShopService

filterCategories = new BehaviorSubject("category");

Answer 1

Этим ответом я обязан @ Józef Podlecki за другой вопрос, на который он ответил мне.

Мне нужно использовать BehaviorSubject вместо обычной темы в ShopService

filterCategories = new BehaviorSubject("all");

Filter Компонент стержня

  ngOnInit() {
    this.initCategories();
    this.filterCategories();
  }

  filterCategories() {
    this.shopService.filterCategories.subscribe((fCategory: string) => {
      if (fCategory === 'all') {
        this.updateCategories();
      } else {
        this.categories.map((category) => {
          category.checked = category.name === fCategory;
        });
        this.updateCategories();
      }
    });
  }