Блог

Я более свежий разработчик angular, у меня есть следующая спецификация, которая требуется для angular cli — Angular CLI: 7.0.7 Узел: 10.13.0 ОС: win32 x64 Angular: 7.0.4, Но возникает 1 ошибка. ошибка

ОШИБКА в src/app/products/products.component.ts(28,12): ошибка TS2322: тип ‘{}’ не может быть присвоен типу ‘Product[]’. Свойство ‘length’ отсутствует в типе ‘{}’.

product.component.ts

 import { Product } from 'src/app/models/product';
import { ActivatedRoute } from '@angular/router';
import { CategoryService } from './../category.service';
import { ProductService } from './../product.service';
import { Component } from '@angular/core';
import 'rxjs/add/operator/switchMap';


@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent {
  products: Product[] = [];
  filteredProducts: Product[] = [];
  categories$;
  category: string;

  constructor(
    route: ActivatedRoute,
    productService: ProductService,
    categoryService: CategoryService
  ) {
    productService
      .getAll()
      .switchMap(products => {
        this.products = products;
        return route.queryParamMap;
      })

      .subscribe(params => {
        this.category = params.get('category');

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

    this.categories$ = categoryService.getAll();
  }
} 
  

Ошибка возникает в следующей строке.switchMap(products => {
this.products = products; // Ошибка возникает на этом маршруте
возврата строки.queryParamMap;

правильным способом было бы добавить типизацию в ваш сервис следующим образом

 class ProductService {
  getAll() {
    this.http.get<Product[]>(...);
  }
}
  

это приведет к приведению вашего типа ответа к Observable<Product[]> и ошибка исчезнет

Возможно, вы захотите изменить

 .switchMap(products => {
...
} 
  

Для

 .switchMap((products: Product[]) => {
...
}