Угловая ошибка TS2339: свойство 'vehicle' не существует для типа 'Vehicle []'

Question

Угловая ошибка TS2339: Свойство 'vehicle' не существует для типа 'Vehicle []'. ошибка была в data.vehicle.results. Любая идея? проблема в модели автомобиля? Я пытался добавить автомобиль на той же модели не работает.

1 сервис

getVehicles(): Observable<Vehicle[]> {
        return this.http.get<Vehicle[]>(CONSTANST.routes.vehicle.list);
    }

2 компонента

  getVehicles() {
        this.priceruleService.getVehicles()
            .pipe(
                map(data => {
                    console.log("data :" , data.vehicle.results)
                    return data
                })
            )
            .subscribe(data => this.vehicles = data);
    }

модель

export interface Vehicle {
    _id: number
    name: string
    Type: string
    Stock: string
    vehicle: any
}

структура данных

https://imgur.com/a/sbJTbIG

Answer 1

Хорошо, добавление данных меняет настолько, что я просто напишу другой ответ, а не переписываю. (И кстати, было бы неплохо, если бы вы могли поместить данные в пост, а не на скриншот).

Первая важная вещь: вы получаете ошибки TypeScript. Другими словами, компилируйте (или переносите, или собирайте) ошибки времени. TypeScript не знает, какие данные поступят от вызова API, и просто следует вашим объявлениям. Здесь:

getVehicles(): Observable<Vehicle[]> {

«Получите наблюдаемые массивы типа Vehicle». И когда вы затем пытаетесь получить доступ к data.vehicle - это уже ошибка TS, потому что вы объявили совершенно другую структуру данных.

Фактическая структура выглядит примерно так:

interface IVehicleItem {
/* you fill it */
}

interface IVehiclesResponse {
    vehicle: {
        results: IVehicleItem[];
    }
}

, тогда вы сможете без проблем

getVehicles(): Observable<IVehiclesResponse> {
        return this.http.get<IVehiclesResponse> //...

.

Answer 2

Если data является массивом Vehicle с, просто замените

            .pipe(
                map(data => {
                    console.log("data :" , data.vehicle.results)
                    return data
                })
            )

на

            .pipe(
                tap(data => {
                    console.log("data :" , data);
                })
            )

Свойство vehicle не существует для типа Vehicle[] (только для типа Vehicle), и ничто здесь не имеет свойства с именем results.

(И да, если map получает данные, выполняет для них побочный эффект и возвращает то же самоенеизмененные данные, это должно быть tap, а не map).

Answer 3

У вас есть данные, которые не являются массивом, но вы возвращаете наблюдаемый тип массива. Сделайте это наблюдаемым, и тогда вы получите доступ:

getVehicles(): Observable<Vehicle> {
    return this.http.get<Vehicle>(CONSTANST.routes.vehicle.list);
}

Answer 4

Пожалуйста, попробуйте изменить

 getVehicles() {
        this.priceruleService.getVehicles()
            .pipe(
                map((data:Vehicle) => {
                    console.log("data :" , data.vehicle.results)
                    return data
                })
            )
            .subscribe(data => this.vehicles = data);
    }