未捕获（承诺）：类型错误：无法设置未定义的属性“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(...)线路。