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

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

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

我面临的错误是

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

Answer 1

错误 1：正如错误指出this.products未定义，因此调用它的任何成员都会产生该错误。 解决此问题的一种方法是将调用移动到回调内部，以便为this.products分配值。 例子：

另一个错误是您试图将pipe/filter应用于返回的数组。 这只能应用于 observable，它是 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 。

解决方案：在beggning中初始化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;
  });
}