web-dev-qa-db-fra.com

L'objet Angular2 ne peut pas définir la propriété d'undefined

J'ai donc cette petite application dans Angular2 et j'essaie de définir un objet. Ceci est le composant principal.

export class ContactComponent  {
    person: {
    firstname: string;
    lastname: string;
}
constructor(private PeopleService: PeopleService){
}

ngOnInit(){

this.PeopleService.fetchData().subscribe(
    data=> {
        this.person.firstname=data.results[0].name.first;
        console.log(this.person.firstname);
    });
  }
}

Ensuite, dans le journal de la console, je reçois: 

Impossible de définir la propriété 'prénom' de non définie

Je ne peux pas comprendre. Merci.

angularobjectundefined
7
raulnoob

Vous définissez simplement le type de person ici (les deux-points représentent des annotations de type, par exemple: propertyName:Type):

person: {
    firstname: string;
    lastname: string;
}

Vous devez d'abord assigner une valeur, sinon ce sera undefined

interface Person {
    firstname ? : string; // the "?" makes the property optional, 
    lastname ? : string; //  so you can start with an empty object
}
export class ContactComponent {

    person: Person = {}; // initializing with an empty object

    constructor(private PeopleService: PeopleService) {}

    ngOnInit() {

        this.PeopleService.fetchData().subscribe(
            data => {
                this.person.firstname = data.results[0].name.first;
                console.log(this.person.firstname);
            });
    }
}
10
n00dl3

J'ai rencontré le même problème et une façon plus simple de le faire serait 

export class ContactComponent  {
person: {
firstname: string;
lastname: string;
}

constructor(private PeopleService: PeopleService){}

ngOnInit(){

    this.PeopleService.fetchData().subscribe(
    data=> {
           **this.person = {
                   firstname: data.results[0].name.first;
                         }**
           console.log(this.person.firstname);
           });
      }
 }

Ce que je pensais être TS par défaut ne donne aucune valeur par défaut à un objet, et il est indéfini,

vous ne pouvez donc pas accéder à la propriété (prénom) d'un objet non défini (personne) En utilisant l'astuce, this.person = { firstname:data.result ...}, TS pense que vous initialisez/définissez (?) l'objet et vous permettra de définir le prénom de la personne.

En faisant cela, vous n'aurez besoin d'aucune interface ou héritage

merci 

0
Anuj

Créer une classe et hériter en composant. Par exemple, voir le code ci-dessous 

       export class Person{

            firstname: string;
            lastname: string;
        }
        export class ContactComponent  {
        person=Person[];
        constructor(private PeopleService: PeopleService){
        }

        ngOnInit(){

        this.PeopleService.fetchData().subscribe(
            data=> {
                this.person.firstname=data.results[0].name.first;
                console.log(this.person.firstname);
            });
          }
        }
0
Venkateswaran R