1
votes

Erreur angulaire TS2339: la propriété 'véhicule' n'existe pas sur le type 'véhicule []'

Erreur angulaire TS2339: la propriété 'véhicule' n'existe pas sur le type 'véhicule []'. l'erreur était sur data.vehicle.results. Une idée? est le problème sur le modèle de véhicule? J'ai essayé d'ajouter un véhicule sur le même modèle qui ne fonctionne pas.

1 service

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

2 composants

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

modèle

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

structure de données

https: //imgur.com/a/sbJTbIG

javascript typescript angular

13 commentaires

à quoi ressemblent les données ?

Vous renvoyez le tableau Vehicle [], mais lors de l'accès, vous utilisez data.vehicle. Changez le type de retour en tant qu'objet normal ou accédez aux données [index] .vehicle

@Manish un tableau d'objets

@vipulpatel, que voulez-vous dire monsieur, ne me semble pas clair

@ Mr.MarkTawin alors c'est probablement le problème lorsque vous essayez d'accéder à data.vehicle.results sur un tableau d'objets. À la place, utilisez use index pour accéder à l'objet. Donc, si je ne me trompe pas, les données sont en fait le tableau auquel vous faites référence par data.vehicle.results

essayez de modifier map (data => { en map ((data: Vehicle) => {)

est-ce que l'accès à un tableau d'objets est important à l'origine de cette erreur?

@edison publie votre réponse pour que je puisse voter si elle est correcte

Si vous pouvez ajouter un exemple de valeur de vos données , je serai en mesure de clarifier cela correctement.

@ Mr.MarkTawin Ce que j'essaie de dire, c'est que vous retournez un tableau mais que vous accédez à un objet similaire. data.vehicle.results où data est un tableau de type Vehicle mais que vous accédez au même objet avec un opérateur point. Essayez d'utiliser data [0] .vehicle comme ça

pouvons-nous renvoyer le data.vehicle.results? tableau d'objets?

imgur.com/a/sbJTbIG , voici la structure des données

data [0] .vehicle ne résout pas non plus le problème

4 Réponses :

0
votes

Veuillez essayer de modifier

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

1 commentaires

cette implémentation est la même que celle à laquelle je veux accéder est le data.vehicle.results

0
votes

Si data est un tableau de Vehicle , alors remplacez simplement

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

par

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

11 commentaires

mais les données sont imbriquées, c'est pourquoi je veux accéder à data.vehicle.results

Mais data.vehicle n'existe pas .

que voulez-vous dire qu'il n'existe pas?

getVehicles () obtient un tableau. Il a toutes les propriétés du tableau, comme length , mais il n'a pas de propriété appelée vehicle .

mais comment puis-je accéder au nid?

veuillez vérifier l'url de l'image

Veuillez coller la structure de données dans votre question, c'est une donnée pertinente qui manquait.

Je l'ai fourni, l'url

continuons cette discussion dans le chat .

avez-vous maintenant une idée du problème?

@ Mr.MarkTawin voir que j'ai publié une nouvelle réponse en regardant les données

0
votes

Vous avez des données qui ne sont pas array mais vous retournez des observables de type array. Rendez-le observable et vous pourrez accéder à:

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

0 commentaires

0
votes

D'accord, l'ajout de données change suffisamment les choses pour que j'écris simplement une autre réponse, au lieu de réécrire. (Et BTW, ce serait bien si vous pouviez mettre les données en post, au lieu d'une capture d'écran.)

Première chose importante: vous obtenez des erreurs TypeScript. En d'autres termes, compilez (ou transpilez ou construisez) des erreurs. TypeScript n'a aucun moyen de savoir quelles données proviendront de l'appel d'API et suit simplement vos déclarations. Ici:

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

"Obtenir une observable de tableaux de type Véhicule". Et lorsque vous essayez ensuite d'accéder à data.vehicle - c'est déjà une erreur TS, car vous avez déclaré une structure de données complètement différente.

La structure réelle ressemble à quelque chose comme

interface IVehicleItem {
/* you fill it */
}

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

alors, vous devriez pouvoir

getVehicles(): Observable<Vehicle[]> {

sans problème.

0 commentaires