this.someFunction (params)는 각도 4의 함수가 아닙니다.

Question

저는 Angular 4 app에서 d3.js으로 작업하고 있습니다. 함수를 호출하려고하는데 오류가 ERROR TypeError: this.highlightNodes is not a function이됩니다.

여기에 내가 작업 한 코드입니다 :

import {Component, OnInit} from '@angular/core'; 

declare let d3:any; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'] 
}) 
export class AppComponent implements OnInit { 

    ngOnInit() { 
    this.networkGraph(); 
    } 

    networkGraph() { 
    d3.netJsonGraph("../assets/json/network.json", 
     { 
     el: "#randomDiv", 
     onClickNode: function (url, opts) { 
      //Here's the error being thrown 
      this.highlightNodes(url, "nodes", true); 
     } 
     } 
    ); 
    } 

    highlightNodes(url, type, initial) { 
    console.log("Its working"); 
    } 
} 

는 로컬 바인딩 때문에 bind(this)가 도움이되지 않은 사용. 함수를 적절한 방법으로 호출하는 방법으로이를 해결하도록 도와주십시오.

Answer 1

이이 경우에 onClickNode을 말한다는 화살표 기능을 사용 컨텍스트는 function 키워드를 사용

onClickNode: (url, opts) => { 
    this.highlightNodes(url, "nodes", true); 
} 

Answer 2

사용 화살표 기능을,이 범위를 숨 깁니다 this입니다. 대신 화살표 기능을 사용하십시오. 이와 함께 ...

onClickNode: function (url, opts) { 

:

이 라인을 교체 당신은 화살표의 기능이 아닌 클릭 핸들러 내부의 메소드를 호출하는

onClickNode: (url, opts) => { 

Answer 3

을 유지하기 위해

onClickNode: (url, opts) => { 
    //Here's the error being thrown 
    this.highlightNodes(url, "nodes", true); 
}