html - 类型 'select' 上不存在属性 '{}'

Question

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

假设我的 URL 为

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

现在我已经对“选择”应用了过滤功能来过滤产品

我遇到的错误是

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

Answer 1

为什么会这样？因为 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;
  });
}