web-dev-qa-db-fra.com

Angular 4 La propriété n'existe pas sur le type Object on build

Je construis un projet en utilisant Angular, j'ai commencé le projet en utilisant angular-cli et quand j'essaye de lancer ng build --prod, j'obtiens cette erreur:

La propriété 'description' n'existe pas sur le type Object

Le code générant cette erreur est le suivant:

export class AppComponent {
    product: Object = {};

    constructor(
        private store: StoreService,
        private request: RequestService,
    ) {
        this.product = this.request.getProduct(_id);
    }
}

<p>{{product.description}}</p>

J'étais en train de lire du contenu à ce sujet et l'erreur est due au fait que j'utilise la définition de type pour définir le produit en tant qu'objet, mais je ne passe aucune définition de propriété.

Je sais que je pourrais définir une interface, comme je le fais avec des tableaux, mais je n'ai pas pu le faire. Je ne sais pas si je le définis mal, voici comment j'ai essayé:

export interface ProductInterface {
    id: Number;
    description: String;
    title: String;
}

product: Object<ProductInterface> = {};

Mais cela me donne aussi des erreurs. Que dois-je faire pour éviter cela?

angulartypescript
23
celsomtrindade

Pour votre premier exemple. Dans votre html, vous dites que le produit a la description de la propriété (ce qui n’est pas le cas du type Object)

Dans votre deuxième exemple. Vous définissez initialement le produit comme un objet vide

product: ProductInterface = {};

Ce qui manque les champs obligatoires de l'interface. Ainsi, vous pouvez supprimer l’initialisation en laissant

product: ProductInterface;

De plus, comme d’autres l’ont noté, vous n’avez pas besoin de la syntaxe Object <>.

15
LLai

Tout d'abord, je voudrais simplement utiliser product: ProductInterface; et vous n'avez même pas à l'initialiser.

Ensuite, cela corrigera probablement votre erreur {{ product?. description }}

3
crash

De mon cas ..

ngOnInit(){
    this.product = this.request.getProduct(_id); // who is _id
}

Il suffit d’ajouter data: any at subscription fonctionne très bien.

this.request.getProduct(_id).subscribe((data: any) => {
   this.product=data;
});

Cela serait utile lorsque les données de réponse ont plus de paires clé/valeur. (Donc, il est difficile/fastidieux de créer une interface.)

1
silambarasan R.D

Vous devez définir la demande dans la méthode OnInit, votre contrôleur qui implémente l'interface OnInit et définir une nouvelle méthode.

ngOnInit(){
    this.product = this.request.getProduct(_id); // who is _id
}

En supposant que getProduct () est une requête http qui renvoie un observable

this.request.getProduct(_id).subscribe((data) => {
   this.product=data;
});
0
alehn96

Dans mon cas, cela a fonctionné après avoir défini mes propriétés comme public

Alors, changez ça

export interface ProductInterface {
    id: Number;
    description: String;
    title: String;
}

pour ça

export interface ProductInterface {
    public id: Number;
    public description: String;
    public title: String;
}
0
Jorge Casariego

Il est prudent d'utiliser any plutôt que Object lorsque des données sont demandées au serveur, car nous ne savons pas ce qui sera renvoyé du serveur. Donc, vous n'avez pas besoin de typecheck ie:

export class AppComponent {
    product: any;

    constructor(
        private store: StoreService,
        private request: RequestService,
    ) {
        this.product = this.request.getProduct(_id);
    }
}
0
simple_human