Angular 6 queryParamMap с фильтром не работает при обновлении страницы

Question

Как утверждает субъект, queryParamMap с фильтром не работает при обновлении страницы. Я использую queryParamMap вдоль фильтра, чтобы показать определенные категории. Это прекрасно работает при нажатии на категорию, но я ожидаю, что она продолжит работать, если пользователь обновит страницу.

Ниже приводится HTML:

 <div class="row">
  <div class="col-3">
    <div name="categoryList" class="list-group">
      <a
        *ngFor="let c of (this.categoryObj | keyvalue); let j = index"
        class="list-group-item list-group-item-action"
        [class.active]="category === c.key"
        routerLink="/products"
        [queryParams]="{ category: c.key }"
      >
        <span>{{ c.key }} </span>
      </a>
    </div>
  </div>
  <div class="col">
    <div class="row">
      <ng-container *ngFor="let item of filteredProducts; let i = index">
        <div class="col">
          <div class="card product-card">
            <img
              class="card-img-top"
              src="{{ oshopUrl + 'uploads/' + item.product_image }}"
              alt="{{ item.product_image }}"
            />
            <div class="card-body">
              <h5 class="card-title">{{ item.name }}</h5>
              <p class="card-text">{{ item.category }}</p>
              <p class="card-text">{{ item.price | currency }}</p>
              <a
                class="btn btn-success"
                href="#"
                (click)="incrementCartState()"
                >Add to Cart</a
              >
              <a
                class="btn btn-success"
                href="#"
                (click)="decrementCartState()"
                >Remove from Cart</a
              >
            </div>
          </div>
        </div>
      </ng-container>
      <div *ngIf="(i + 1) % 2 === 0" class="w-100"></div>
    </div>
  </div>
</div>

Следующее в конструкторе позволяет выбрать категорию, которая фильтрует товары:

this.route.queryParamMap.subscribe(params => {
  this.category = params.get("category");

  this.filteredProducts = this.category
    ? this.products.filter(p => p.category === this.category)
    : this.products;
});

Однако, если я перезагрузлю / обновлю страницу, тогда будут показаны все продукты. Ниже следует подписка на метод в сервисах продуктов, который заполняет два массива

this.prdSrvc.getAllProducts().subscribe(resProd => {
  this.filteredProducts = this.products = resProd.products;
});

Я пытался переместить queryParamMap в onNgInit, думая, что это может быть связано со временем, а также с наличием их в обоих, но, несмотря ни на что, продукты фильтруются, только если я нажимаю на одну из категорий.

Кстати, когда я обновляю страницу, выделяется правильная Категория, которая соответствует queryParamMap. Как будто this.category не определяется во времени для продуктов, которые будут отфильтрованы.

Заранее спасибо

Answer 1

Оказывается, это была проблема с синхронизацией, и мне нужно было поместить queryParamMap после заполнения массива products:

this.prdSrvc.getAllProducts().subscribe(resProd => {
  this.filteredProducts = this.products = resProd.products;
  this.route.queryParamMap.subscribe(params => {
    this.category = params.get("category");

    this.filteredProducts = this.category
      ? this.products.filter(p => p.category === this.category)
      : this.products;
  });
});