Question

我是Angular的新手，正在尝试创建一个电子商务项目，因此我想根据URL的queryParams中的内容过滤产品。

所以可以说我的网址为

http://localhost:4200/?category=Fruits

因此应过滤所有类别为水果的产品

这是该代码

html文件

<div class="row ">
  <div class="col-md-3">
    <ul class="list-group" <a *ngFor="let c of categories" class="list-group-item" routerLink="/" routerLinkActive="active" [queryParams]="{category:c.name}">
      {{c.name}}
      </a>
    </ul>
  </div>
  <div class="col">
    <div class="row">
      <ng-container *ngFor="let p of products;let i=index" class="row-eq-height">
        <div class="col">
          <mdb-card style="width:17rem;" class="c1">
            <div class="view rgba-white-slight waves-light" mdbWavesEffect>
              <mdb-card-img [src]="p?.imageurl" alt="Card image cap" class="cardimg"> </mdb-card-img>
              <a>
                <div class="mask"></div>
              </a>
            </div>
            <mdb-card-body>
              <mdb-card-title>
                <h4>{{p?.title}}</h4>
              </mdb-card-title>
              <mdb-card-text>$ {{p?.price}}
              </mdb-card-text>
              <button mdbBtn type="button" color="primary" size="sm" mdbWavesEffect>Add to Cart</button>
            </mdb-card-body>
          </mdb-card>
        </div>

      </ng-container>
    </div>
  </div>


</div>

.component.ts

import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ProductsService } from '../services/products.service';
import { ItemsService } from '../services/items.service';
import { filter } from 'rxjs/operators';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent implements OnInit {
  products;
  categories;
  query;
  filteredproducts;
  subscription: Subscription;

  constructor(private prservice: ProductsService, private iservice: ItemsService, private activatedrouter: ActivatedRoute) { }


  ngOnInit() {
    this.subscription = this.iservice.getdata().subscribe(data => {
      this.products = data;
      console.log(this.products)
    });

    this.subscription = this.iservice.getitems().subscribe(categ => {
      this.categories = categ;
    });

    this.activatedrouter.queryParams.subscribe(p => {
      this.query = p['category'];
      console.log(this.query)

      this.filteredproducts = this.products.pipe(filter(p => p.select === this.query));
      console.log(this.filteredproducts)

    });
  }

  OnDestroy() {
    this.subscription.unsubscribe();
  }
}

这是在控制台中获得的我的产品的屏幕截图 https://ibb.co/FnKDvsk

现在我已将过滤器功能应用于“选择”以过滤产品

我面临的错误是

无法读取未定义的属性'pipe'
属性“ select”在类型“ {}”上不存在。

Answer 1

错误1：正如错误状态this.products未定义一样，因此对其调用任何成员都将产生该错误。解决此问题的一种方法是将调用移至回调内部，以便为this.products分配值。示例：

另一个错误是您试图将pipe/filter应用于返回的数组。这只能应用于可观察对象，它是rxjs库的一部分。只需直接在返回的数组上使用Array.prototype.filter。

ngOnInit() {
  this.subscription = this.iservice.getdata().subscribe(data => {
    this.products = data;
    console.log(this.products);
    this.activatedrouter.queryParams.subscribe(p => {
      this.query = p['category'];
      console.log(this.query)

      this.filteredproducts = this.products.filter(p => p.select === this.query);
      console.log(this.filteredproducts)
    });       
  });

  this.subscription = this.iservice.getitems().subscribe(categ => {
    this.categories = categ;
  });
}

错误2：Property 'select' does not exist on type '{}'.

返回的产品实例不包含select成员。也许这是在代码中的其他地方引起的，但这是共享代码中唯一包含对成员select的调用的地方。

Answer 2

为什么会这样？因为this.products未定义，而您正在pipe上应用未定义。

解决方案：在初始化中初始化products：products = []

或

ngOnInit() {
  this.subscription = this.iservice.getdata().subscribe(data => {
    this.products = data;
    console.log(this.products)

    this.activatedrouter.queryParams.subscribe(p => {
      this.query = p['category'];
      console.log(this.query)
      this.filteredproducts = Object.create(this.products);
      this.filteredproducts = this.filteredproducts.filter(p => p.select === this.query);
      console.log(this.filteredproducts)

    });
  });

  this.subscription = this.iservice.getitems().subscribe(categ => {
    this.categories = categ;
  });
}

类型“ {}”上不存在属性“选择”

2 个答案: