web-dev-qa-db-ja.com

angular 2のjqueryからTypeScriptメソッドを呼び出す

私は boostrap-select Dropdown in angular 2 form with jqueryを使用しています。OnchangejqueryイベントTypeScript onDropDownChangeChangeメソッドを呼び出したいのですが、機能しません。

import { Component, OnInit, ViewChild } from '@angular/core';
import { RequestOptions } from '@angular/http';
import 'rxjs/add/observable/throw';
declare var $: JQueryStatic;

export class TestComponent implements OnInit {
  selectedValue: string;

  ngOnInit(): void {

        $(function() {
         var self = this;
          $('.selectpicker').on('change', function(){
            var selectedds = $(this).find('option:selected').val();
            self.onDropDownChangeChange(selectedds); //This is not working
            //this.onChange();
          });

        });  

  }

  onDropDownChangeChange(value: string) {
        this.selectedValue = value;
        this.PopulateGrid(selectedValue);
   }


}
angulartypescriptangular2-formstypescript2.0
10
Prabhu Arumugam

スコープが混乱しています。次のようになります。

ngOnInit(): void {

    var self = this;
    $(function() {

          $('.selectpicker').on('change', function(){

              var selectedds = $(this).find('option:selected').val();
              self.onDropDownChangeChange(selectedds); //This is not working
              //this.onChange();

           }); 

    }); 
}
23
eko

コンテキストがありません。

また、サードパーティライブラリのカスタムイベントを処理するには、場合によっては、このようにイベントを受け取った後でコードを実行する必要がありますAngular.

constructor(private zone: NgZone) {}
ngOnInit(): void {
    var self = this;
    this.zone.run(() => {
      $('.selectpicker').on('change', function(){
        var selectedds = $(this).find('option:selected').val();
        self.onDropDownChangeChange(selectedds);
        //this.onChange();
      }); 
    });

  }
2
Tiep Phan