Typescript: Тип X не имеет следующих свойств из типа Y length, pop, push, concat и еще 26. [2740]

У меня есть интерфейс продукта:

export interface Product{
code: string;
description: string;
type: string;
}

Сервис с методом, вызывающим конечную точку продукта:

  public getProducts(): Observable<Product> {
return this.http.get<Product>('api/products/v1/');
}

И компонент, где я использую этот сервис, чтобы получить продукты.

export class ShopComponent implements OnInit {
public productsArray: Product[];

ngOnInit() {
this.productService.getProducts().subscribe(res => {
this.productsArray = res;
});
}
}

С этим состоянием я получаю ошибку:

[ts] В типе “Product” отсутствуют следующие свойства типа “Product []”: длина, всплывающее, push, concat и еще 26. [2740]

Удаление ввода в переменной productsArray устраняет ошибку, но не понимаете, почему это не работает, поскольку ответ сервера представляет собой массив объектов в типе Products?

Вы возвращаете Observable<Product> и ожидаете, что он будет Product[] внутри обратного вызова subscribe.

Тип, возвращаемый из http.get() и getProducts(), должен быть Observable<Product[]>

public getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>('api/products/v1/');
}

Вы забыли пометить тип возвращаемого значения getProducts как массив. В вашем getProducts говорится, что он вернет один продукт. Так что измените это на это:

public getProducts(): Observable<Product[]> {
return this.http.get<Product[]>('api/products/v1/');
}

Я новичок в Angular и сталкиваюсь с подобной проблемой, не в состоянии выяснить, как применить решение в моем случае, ниже приведен мой код, у меня есть массив продуктов, который я назначаю для этого.продукты внутри switchMap наблюдаются. Я возвращаю список продуктов из Firebase DB, так что не уверен, как заставить его возвращать массив типов.

//Я получаю сообщение об ошибке ниже строки для this.products this.products = products;

product.component.ts

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../product.service';
import { CategoryService } from '../category.service';
import { ActivatedRoute } from '@angular/router';
import { Product } from '../models/product';
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 => {
// I am getting error below line for this.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();
}
}

product.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable({
providedIn: 'root'
})
export class ProductService {

constructor(private db: AngularFireDatabase) { }

create(product){
return this.db.list('/products').push(product);
}

getAll(){
return this.db.list('/products');//to get list of all products
}

get(productId){
return this.db.object('/product/' + productId);
}
}