Question

因此，我在一个商店页面上有一个名为FilterBarComponent和onInit的子组件，我希望它发出所有类别，因为默认情况下，我希望呈现商店中的所有产品，但是在homePageComponent上，我有一个按钮，允许用户导航到shopPage并查看特定类别，例如说“查看衬衫”的按钮。我的问题是，默认类别数组在订阅者功能完成之后发生，并且在订阅者中，事件发射器不会触发。这是我的另一个与此问题有关的问题。 Angular EventEmitter is not emitting in subscriber

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中的Observable

filterCategories = new BehaviorSubject("category");

Answer 1

我欠@JózefPodlecki这个答案是他回答了我的另一个问题。

我需要在商店服务中使用BehaviorSubject而不是常规主题

filterCategories = new BehaviorSubject("all");

过滤器栏组件


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

Angular订阅无法正常工作

1 个答案: