Angular Массив не обновляется после функции сопоставления

Question

У меня есть массив категорий, которые я фильтрую, когда пользователь нажимает кнопку, которая выбирает определенные c категории для просмотра. однако после сопоставления массива категорий категории отображают желаемый результат в консоли, однако он, кажется, каким-то образом теряется, и категории не обновляются в DOM?

ngOnInit() {
    this.initCategories();
    this.shopService.filterCategories.subscribe(
      (fCategory: string) => {
        const filteredCategories = this.categories.filter(category => {
          return category.name !== fCategory;
        });
        for (const obj of filteredCategories) {
          obj.checked = false;
        }
        const newCategories = [];
        this.categories.map(obj => {
          filteredCategories.filter(fCat => obj);
          newCategories.push(obj);
        });
        this.categories = newCategories;
        console.log(this.categories)
      }
    );
  }
  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'},
    ];
  }

result

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

однако, когда я регистрирую массив категорий в ngAfterViewInit, я получаю следующее.

[{…}, {…}, {…}, {…}, {…}]
0: {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"}

что я пробовал

this.shopService.filterCategories.subscribe(
      (fCategory: string) => {
        const filteredCategories = this.categories.filter(category => {
          return category.name !== fCategory;
        });
        for (const obj of filteredCategories) {
          obj.checked = false;
        }
        let newCategories;
        newCategories = [...this.categories.map(obj => {
          filteredCategories.filter(fCat => obj);
        })];
        this.categories = newCategories;
        console.log(this.categories)
      }
    );
  }

Answer 1

Я думаю, вам нужно поиграть с

        this.categories.map(obj => {
          filteredCategories.filter(fCat => obj);

оба они возвращают новый массив, они не касаются текущего. Поэтому я бы предположил, что filteredCategories.filter по крайней мере должно быть где-то назначено.

// an empty array
const newCategories = [];

// starting a loop, forEach would fit here better because it doesn't return anything.
this.categories.map(obj => {
  // the result of this filter won't be assigned anywhere.
  filteredCategories.filter(fCat => obj);

  // pushing obj to newCategories for every iteration.
  // may be you need to wrap it with `if` based on filter result.
  newCategories.push(obj);
});

// newCategories is an array with the same items as this.categories.
// because we simply iterate without any conditions.
console.log(newCategories);

---

В части обновления вашего вопроса filter по-прежнему ничего не делает. Его результат должен быть назначен или использован в условии.

        newCategories = [...this.categories.map(obj => {
          filteredCategories.filter(fCat => obj); // <- should be assigned
        })];

---

, если вы хотите добавить только отфильтрованную активную категорию.

    ngOnInit() {
        this.initCategories();
        this.shopService.filterCategories.subscribe(
            (fCategory: string) => {
                const filteredCategories: FilterBarComponent['categories'] = [];
                for (const category of this.categories) {
                    filteredCategories.push({
                        ...category,
                        checked: category.name === fCategory,
                    });
                }

                this.categories = filteredCategories;
                this.updateCategories();
            }
        );
    }