Angular 无法访问其中角度组件的属性

试图在快餐店展示SSE事件。问题是我无法访问EventSource的

onMessage

函数中的

snackBar

属性。 浏览器控制台中显示的错误是

无法读取未定义的属性“open”

import {Component, OnInit} from '@angular/core';
import {MatSnackBar} from '@angular/material';
@Component({
  selector: 'snack-bar-overview-example',
  templateUrl: 'snack-bar-overview-example.html',
})
export class SnackBarOverviewExample implements OnInit{
  constructor(public snackBar: MatSnackBar) {}
  ngOnInit() {
     //Created a local Server Sent Events server
     //which sends timestamp for every 5 second
     var source = new EventSource('http://localhost:8000/events');
     source.onmessage = function(response){
       console.log('test', response.data);
       //Could not able to access snackbar
       //Error statement is given below
       //Cannot read property 'open' of undefined
       this.snackBar.open(response.data, 'close', {
         duration: 4000
       });
     }
     //Same lines here, have no issues and working perfectly
     this.snackBar.open('message', 'close', {
       duration: 4000
     });
  }
}

使用胖箭头

（）=>

而不是

函数

source.onmessage = (response) => {
       console.log('test', response.data);
       //Could not able to access snackbar
       //Error statement is given below
       //Cannot read property 'open' of undefined
       this.snackBar.open(response.data, 'close', {
         duration: 4000
       });
     }

无法在
函数
块内访问此

对象。

使用胖箭头

（）=>

而不是

函数

source.onmessage = (response) => {
       console.log('test', response.data);
       //Could not able to access snackbar
       //Error statement is given below
       //Cannot read property 'open' of undefined
       this.snackBar.open(response.data, 'close', {
         duration: 4000
       });
     }

---

无法在
函数
块内访问此

对象。

由于您试图在回调中访问此对象，因此您处于无法访问的错误范围内。有两种方法可以解决这个问题。第一个也是最好的方法是修改现有函数以使用胖箭头语法：

 source.onmessage = (response) => {
   console.log('test', response.data);
   //Could not able to access snackbar
   //Error statement is given below
   //Cannot read property 'open' of undefined
   this.snackBar.open(response.data, 'close', {
     duration: 4000
   });
 }

另一个有效但有些人不喜欢的方法是，在输入

ngOnInit

时创建一个变量

self

，并使用该变量来维护对适当范围的引用

ngOnInit() {
     const self = this; // here is where you would create it
     //Created a local Server Sent Events server
     //which sends timestamp for every 5 second
     var source = new EventSource('http://localhost:8000/events');
     source.onmessage = function(response){
       console.log('test', response.data);
       //Could not able to access snackbar
       //Error statement is given below
       //Cannot read property 'open' of undefined
       // replace this with self here 
       self.snackBar.open(response.data, 'close', {
         duration: 4000
       });
     }
     //Same lines here, have no issues and working perfectly
     self.snackBar.open('message', 'close', {
       duration: 4000
     });
  }

---

第一个是更好的解决方案，但两者都可以满足您的需要。

由于您试图在回调中访问此项，因此您在错误的范围内无法访问。有两种方法可以解决这个问题。第一个也是最好的方法是修改现有函数以使用胖箭头语法：

 source.onmessage = (response) => {
   console.log('test', response.data);
   //Could not able to access snackbar
   //Error statement is given below
   //Cannot read property 'open' of undefined
   this.snackBar.open(response.data, 'close', {
     duration: 4000
   });
 }

另一个有效但有些人不喜欢的方法是，在输入

ngOnInit

时创建一个变量

self

，并使用该变量来维护对适当范围的引用

ngOnInit() {
     const self = this; // here is where you would create it
     //Created a local Server Sent Events server
     //which sends timestamp for every 5 second
     var source = new EventSource('http://localhost:8000/events');
     source.onmessage = function(response){
       console.log('test', response.data);
       //Could not able to access snackbar
       //Error statement is given below
       //Cannot read property 'open' of undefined
       // replace this with self here 
       self.snackBar.open(response.data, 'close', {
         duration: 4000
       });
     }
     //Same lines here, have no issues and working perfectly
     self.snackBar.open('message', 'close', {
       duration: 4000
     });
  }

---

第一种是更好的解决方案，但两者都可以满足您的需要。

创建函数时，这与函数范围有关，在本例中是函数对象本身。通过粗箭头定义函数创建函数时，这与函数范围有关，在本例中是函数对象本身。通过粗箭头定义函数