Angular2和Web Midi

Question

我是Typescript的新手，我正嘗試使用Angular2創建一個Web Midi應用程序，但我在理解某些錯誤時遇到了一些麻煩。我相信我應該將Midi功能放入服務中，但如果我錯了，請糾正我。

以下作品中的例子，當MIDI變量和onMIDIMessage功能外

var midi:any; 

function onMIDIMessage(event) { 
     console.log("msg received", event); 
} 

export class MidiService { 

    onMidiInit() { 
     if (navigator.requestMIDIAccess) { 
      navigator.requestMIDIAccess({ 
       sysex: false 
      }).then(this.onMIDISuccess, this.onMIDIFailure); 
     } else { 
      alert("No MIDI support in your browser."); 
     } 
    } 

    onMIDISuccess(midiAccess) { 
     console.log('MIDI Access Object', midiAccess); 
     midi = midiAccess; 
     console.log(midi); 

     var inputs = midi.inputs.values(); 
     for (var input = inputs.next(); input && !input.done; input = inputs.next()) { 
      input.value.onmidimessage = onMIDIMessage; 
     } 

    } 

    onMIDIFailure(e) { 
     console.log(e); 
    } 
} 

一切都很好，我可以打印出與此輸入的MIDI信息。不過，我不明白的是，當onMIDIMessage函數和MIDI變量位於MidiService類中時，Chrome會引發錯誤。爲什麼會發生？

midi.service.ts:24 Uncaught (in promise) TypeError: Cannot read property >'onMIDIMessage' of undefined at MidiService.onMIDISuccess (http://localhost:3000/app/midi.service.js:27:57)

var midi:any; 

// Code that does not work 
export class MidiService { 

    onMidiInit() { 
     if (navigator.requestMIDIAccess) { 
      navigator.requestMIDIAccess({ 
       sysex: false 
      }).then(this.onMIDISuccess, this.onMIDIFailure); 
     } else { 
      alert("No MIDI support in your browser."); 
     } 
    } 

    onMIDISuccess(midiAccess) { 
     console.log('MIDI Access Object', midiAccess); 
     midi = midiAccess; 
     console.log(midi); 

     var inputs = midi.inputs.values(); 
     for (var input = inputs.next(); input && !input.done; input = inputs.next()) { 
      input.value.onmidimessage = this.onMIDIMessage; 
     } 

    } 

    onMIDIMessage(event) { 
     console.log("msg received", event); 
    } 

    onMIDIFailure(e) { 
     console.log(e); 
    } 
} 

---編輯

的方法被稱爲在app.component.ts文件。

import {Component} from 'angular2/core'; 
import {MidiService} from './midi.service'; 

@Component({ 
    selector: 'my-app', 
    template: '<h1>My First Angular 2 App</h1>', 
    providers: [MidiService] 
}) 
export class AppComponent { 
    constructor(midiService: MidiService) { 
     midiService.onMidiInit(); 
    } 
} 

Answer 1

看起來this不指向當前的類實例。

添加.bind(this)當你通過當前類的回調方法：

input.value.onmidimessage = this.onMIDIMessage.bind(this);