Javascript 具有socket.io和Angular的值的属性

我正在使用以下代码尝试使用socket.io获取数据：

server.js:

io.sockets.on('connection', function (socket) {
    console.log('Un client est connecté !');
    retrieveDB((res) =>{
      socket.emit('dataSend', res);
    });
});

import * as io from 'socket.io-client';
options = []
socket = io.connect('http://localhost:4200');

ngOnInit(){
    this.socket.on('dataSend', function(message) { 
            this.options = message; 
            alert(message); 
        });
    if(this.myControl.value !='') { 
      this.init = 1; 
      this.filteredOptions = this.myControl.valueChanges
      .pipe(
          startWith(''),
          map(val => this.filter(val))
        );
    } else {
      this.init = 0;
    } 
  }

 filter(val: string): string[] {
    if(this.init){
      return this.options.filter(option =>
        option.toLowerCase().includes(val.toLowerCase()));
    } else {
      return []
    }
  }

filesearch.component.ts:

io.sockets.on('connection', function (socket) {
    console.log('Un client est connecté !');
    retrieveDB((res) =>{
      socket.emit('dataSend', res);
    });
});

import * as io from 'socket.io-client';
options = []
socket = io.connect('http://localhost:4200');

ngOnInit(){
    this.socket.on('dataSend', function(message) { 
            this.options = message; 
            alert(message); 
        });
    if(this.myControl.value !='') { 
      this.init = 1; 
      this.filteredOptions = this.myControl.valueChanges
      .pipe(
          startWith(''),
          map(val => this.filter(val))
        );
    } else {
      this.init = 0;
    } 
  }

 filter(val: string): string[] {
    if(this.init){
      return this.options.filter(option =>
        option.toLowerCase().includes(val.toLowerCase()));
    } else {
      return []
    }
  }

ngOnInit（）

应该使用

socket.on（）

检索数据，第二部分初始化自动完成（）但我始终有一个值

options

nul。我知道这段代码是错误的，因为

socket.on

异步工作，但我找不到如何纠正它

我尝试通过以下操作更改代码：

ngOnInit(){
    this.socket.on('dataSend', function(message) { 
            this.options = message; 
            alert(message); 
        });
  }

onClick(){
  if(this.myControl.value !='') { 
      this.init = 1; 
      this.filteredOptions = this.myControl.valueChanges
      .pipe(
          startWith(''),
          map(val => this.filter(val))
        );
    } else {
      this.init = 0;
    } 

单击搜索栏时，

onClick（）

正在运行。但我还是得到了同样的结果。所以我开始认为问题出在代码的其他地方<代码>警报（this.options）返回正确的值，但仅此而已

我还试图创建一个

显示按钮

，当我点击它时，显示

选项

的值，但我仍然没有正确的答案

我还尝试在

ngOnInit（）

中创建一个带有回调的异步函数：

但这不起作用

谢谢你帮助我，或者至少是读了这封信

编辑：我尝试了另一种方法

我有一个措辞NaryManager服务：

export class DictionnarymanagerService implements OnInit{

  data: any = ['test2'];
  socket = io.connect('http://localhost:4200');

  constructor() {}

  ngOnInit() {
     this.socket.on('dataSend', function(message) { 
            this.options = message; 
            alert(message); 
        });
  }

我的文件搜索组件中只有：

选项=[]

ngOnInit(){
  this.options = this.dictionnaryManager.data;
  if(this.myControl.value !='') { 
  this.init = 1; 
  this.filteredOptions = this.myControl.valueChanges
  .pipe(
      startWith(''),
      map(val => this.filter(val))
    );
} else {
  this.init = 0;
 } 
}

---

但是因为

socket.on

是异步的，所以我没有正确的值（

options

采用

'test2

的值。如何在

socket.on（）结束后发送
数据的值
您不使用箭头函数，因此
此
指的是您在
socket.on
中提供的函数。
箭头函数不捕获此

有关详细信息，您可以签出此问题：

由于箭头函数未捕获

此

，以下代码应该可以工作，因此

此

仍然引用组件类的实例：

ngOnInit() {
    this.socket.on('dataSend', message => this.options = message);

---

能否尝试在

socket.emit（）周围添加1秒或2秒的超时

bit of code？我怀疑该值是在页面呈现之前发出的，这意味着数据是在您可以读取它之前发送的，如果是这样的话，我将无法用警报显示数据，不是吗？我误读了该部分，所以当我在

socket.on（）上时，您可以对此发出警报。选项，但不显示消息

我可以看到消息和this.options，但当我不在其中时，我仍然有

this.options=[]

即使我尝试用按钮显示它。我认为异步函数有问题，但似乎是其他问题。好像

套接字中的this.options（）

和

选项是两个不同的对象。filesearch.component.ts文件中是否有类/组件？是否去掉了不需要的部分？