Uncaught (в обещании): TypeError: Невозможно установить свойство 'other_user_image' из неопределенного

Question

Я пытаюсь установить атрибут src для изображения, используя функцию машинописного текста, но снова и снова получаю сообщение "невозможно установить свойство неопределенной ошибки". Я не понимаю, где я делаю это неправильно.

HTML-код:

<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:

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

При печати documentSnapshot.data()['profileImageUrl'] я получаю строку, подобную этой http://qualiscare.com/wp-content/uploads/2017/08/default-user.png, но не могу присвоить ее атрибуту изображения src.

Answer 1

Ваша проблема заключается в использовании this внутри функции, определенной с function () {...}. Внутри этой функции this равно undefined, следовательно, ошибка.

Измените код, чтобы использовать функцию стрелки, которая не создает новый контекст и поэтому this сохраняет свое значение (ссылка на ваш компонент):

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

Проверьте строку get().then(...).