La propriété Angular 4 n'existe pas sur le type Object à la construction

Question

Je suis en train de construire un projet à l'aide Angulaire, j'ai commencé le projet à l'aide angulaires-cli et lorsque j'essaie d'exécuter ng build --prod je reçois cette erreur:

La propriété "description" n'existe pas sur le type d'Objet

Le code générer 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'ai été la lecture de certains contenus sur le présent et l'erreur est parce que je suis en utilisant la définition de type pour définir le produit comme Objet, mais je ne suis pas de passer une définition de propriété.

Je sais que je pourrais définir une Interface, comme je le fais avec les tableaux, mais je n'étais pas capable de le faire. Je ne sais pas si je suis la définition de ce mal, c'est de cette façon que j'ai essayé:

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

product: Object<ProductInterface> = {};

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

Answer 1

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 pour le type Object)

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

 product: ProductInterface = {};
 

Il manque les champs obligatoires de l'interface. Vous pouvez donc supprimer l'initialisation, laissant

 product: ProductInterface;
 

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

Answer 2

De mon cas ..

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

Ajouter simplement des données: tout à l'abonnement fonctionne très bien.

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

Cela serait utile alors que les données de réponse ont plus de paires clé / valeur. (Il est donc difficile / long de créer une interface.)

Answer 3

Tout d'abord, j'utiliserais simplement product: ProductInterface; et vous n'avez même pas besoin de l'initialiser.

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

Answer 4

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;
});
 

Answer 5

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

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;
}