角度错误TS2339：类型“车辆[]”上不存在属性“车辆”

Question

角度错误TS2339：类型“车辆[]”上不存在属性“车辆”。错误在于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

请尝试更改

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

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

您的数据不是数组，但返回的是数组类型的observable。使其可观察，然后您可以访问：

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

Answer 4

好的，您添加的数据已经足够改变，我将只写另一个答案而不是重写。 （顺便说一句，如果您可以将数据发布到屏幕上而不是屏幕快照中，那将是很好的选择。

第一件事：您遇到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> //...

没有问题。