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/’); } Ответ №1

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

public getProducts(): Observable<Product[]> { return this.http.get<Product[]>(‘api/products/v1/’); } Ответ №2

Я новичок в 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); } }