Angular2とWeb Midi

Question

私はTypescriptを使い慣れていて、Angular2を使ってWeb 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); 
    } 
} 

--- EDIT

方法が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は現在のクラスインスタンスを指していません。これらの方法は

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