Uncaught (in promise): TypeError: Cannot set property 'other_user_image' of undefined

Question

I am trying to set the image src attribute using a typescript function but getting "cannot set property of undefined error" again and again. I don't understand where I am doing it wrong.

html code:

<div class="panel-heading" style="border-bottom: 1px solid #cfdbe2; padding: 14px 15px;">
    <div class="pull-left">
        <img class="media-box-object img-circle thumb32" src="{{other_user_image}}" alt="Image" />
    </div>
    <div class="panel-title">User</div>
</div>

component.ts code:

export class ChatComponent implements OnInit {
    other_user_image: string;

    constructor(
        public authService: AuthService,
        afAuth: AngularFireAuth,
        public db: AngularFirestore,
        private router: Router) {}

    ngOnInit() {
    }

    openChatWindow(event: any){
        var target = event.target || event.srcElement || event.currentTarget;
        var idAttr = target.attributes.id;
        var value = idAttr.nodeValue;
        // var elem_id = (this.elem);
        console.log(value);
        var user_chat_room = this.db.collection("users").doc(value)
        console.log(user_chat_room);
        user_chat_room.ref.get().then(function(documentSnapshot) {
            console.log(documentSnapshot.data());
            if (documentSnapshot.exists) {
                console.log('doneeeeeeee');
                console.log(documentSnapshot.data()['profileImageUrl']);

                this.other_user_image = documentSnapshot.data()['profileImageUrl'];
                console.log(this.other_user_image);
            } else {
                // doc.data() will be undefined in this case
                console.log("No such document!");
            }
        });
    }
}

While printing documentSnapshot.data()['profileImageUrl'], I am getting a string like this http://qualiscare.com/wp-content/uploads/2017/08/default-user.png but I am unable to assign it to the image src attribute.

Does this work *ngIf="other_user_image" [src]="other_user_image" ? — Franklin Pious, May 02 '18 at 11:31
Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — ConnorsFan, May 02 '18 at 11:44

Oscar Paz · Accepted Answer · 2018-05-02T11:38:17.140

Your problem is the use of this inside a function defined with function () {...}. Inside that function, this is undefined, hence the error.

Change the code to use an arrow function, which does not create a new context and so this keeps its meaning (a reference to your component):

ngOnInit() { }

openChatWindow(event: any){
        var target = event.target || event.srcElement || event.currentTarget;
        var idAttr = target.attributes.id;
        var value = idAttr.nodeValue;
        // var elem_id = (this.elem);
        console.log(value);
        var user_chat_room = this.db.collection("users").doc(value)
        console.log(user_chat_room);
        user_chat_room.ref.
            get().then(documentSnapshot => {
                console.log(documentSnapshot.data());
                if (documentSnapshot.exists) {
                    console.log('doneeeeeeee');
                    console.log(documentSnapshot.data()['profileImageUrl']);

                    this.other_user_image = documentSnapshot.data()['profileImageUrl'];
                    console.log(this.other_user_image);

                } else {
                    // doc.data() will be undefined in this case
                    console.log("No such document!");
                }
            });
}

Check the get().then(...) line.

Uncaught (in promise): TypeError: Cannot set property 'other_user_image' of undefined

1 Answers1