使用socket.io和Angular值的歸因

Question

我正在嘗試使用以下代碼通過socket.io獲取數據：

server.js：

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

filesearch.component.ts：

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()應該使用ngOnInit()檢索數據，第二部分初始化一個自動socket.on() （ https://material.angular.io/components/autocomplete/overview ），但是我始終具有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() 。 但是我仍然得到相同的結果。 所以我開始認為問題出在代碼的其他地方。 alert(this.options)返回正確的值，僅此而已。

我也嘗試創建一個“ Display Button以在單擊它時顯示options的值，但我仍然沒有正確的答案。

我還嘗試用ngOnInit()的回調創建一個異步函數：

ngOnInit(){
    this.socket.on('dataSend', function(message) { 
        this.initialise(message, this.autocompletion()); 
    });
  }

initialise(message, callback){
    this.options = message;
    alert(message); 
    callback();
}

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

但這不起作用。

感謝您的幫助或至少閱讀了此消息。

編輯：我嘗試了另一種方法

我有一個dictionnarymanagerService ：

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

而且我只有在fileSearchComponent中 ：

選項= []

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()結束后發送data值

Answer 1

您不使用箭頭功能，因此this是指您在socket.on提供的功能。 箭頭功能不能捕獲this 。

您可以查看此問題以獲取更多信息： 箭頭函數與函數聲明/表達式：它們是否等效/可互換？

由於箭頭功能無法捕獲this ，因此以下代碼應能正常工作，因此this仍引用組件類的實例：

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