I've been struggling to set the image src attribute using a typescript function, but I keep encountering a "cannot set property of undefined error." It's frustrating because I can't seem to figure out where I'm going wrong.
Here is the HTML code snippet:
<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>
And here is the TypeScript component.ts code snippet:
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!");
}
});
}
}
Even though I am able to print
documentSnapshot.data()['profileImageUrl']http://qualiscare.com/wp-content/uploads/2017/08/default-user.pngsrc attribute.