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上，以为这可能是时间问题，并且同时考虑这两个问题，但是无论如何，仅当我单击类别之一时才对产品进行过滤。 / p>

顺便说一句，当我刷新页面时，突出显示了正确的Category，它对应于queryParamMap。好像没有为要过滤的产品及时定义this.category。

预先感谢

Answer 1

事实证明这是一个时间问题，我需要在product数组填充后放置queryParamMap：

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

刷新页面时，带有过滤器的Angular 6 queryParamMap不起作用

1 个答案: