10

So I have this little app in Angular2, and I'm trying to define an object. This is the main component.

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

Then in the console log I get:

Cannot set property 'firstname' of undefined

I can't figure it out. Thanks.

4 Answers 4

15

You are just defining the type of person here (the colon stands for type annotations eg:propertyName:Type) :

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

What you have done here is telling the compiler that person is an object literal with 2 string properties firstname and lastname. It defines what can be store in that property, not what it contains.

You should assign a value first, otherwise, it will be 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);
            });
    }
}
Sign up to request clarification or add additional context in comments.

7 Comments

Can you take a look on this gyazo.com/2ef08d144e87fc28f83fbfe83d974bf3, i get 50 results from the http request, but the second console.log for [1] does not work. any idea why? It's the same error 'cannot set...'
of course i wont create manually each entry, i just wanted to check if it works, i also tried with a for
this.person=data.results.map(()=>{firstname:item.name.first,lastname:item.name.last}) But I mean if you have issues like this, you probably should not have started with angular 2, maybe something simpler, for a beginner angular 2's learning curve is steep.
I did it, thanks ! So that's because the array doesn't has a implicit length, right?
That's because the 2nd entry (array[1]) does not exist yet. It's undefined, not a person, you cannot set a property on undefined...
|
0

Create a class and inherit in component. For Example see the below code

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

Comments

0

First declare an object of person type on onInit().

person p=new person();

Comments

0
  1. Firstly create an object in the component class. ex:

    employee=new Employee();
    
  2. Then refer to this employee object

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.