Angular 映射函数后数组未更新

Question

我有一个类别数组，当用户单击选择要查看的特定类别的按钮时，我会过滤这些类别。但是在映射类别数组之后，类别在控制台中显示了所需的结果，但是它似乎以某种方式丢失了并且类别没有在 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'},
    ];
  }

结果

[{…}, {…}, {…}, {…}, {…}]
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);

他们两个return一个新数组，他们不接触当前数组。因此我认为 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();
            }
        );
    }

Angular 映射函数后数组未更新

Angular Array not updating after maping function

javascript

higher-order-functions

typescript

angular