Angular и d3.js не могут получить доступ к полю класса

Question

Я хочу создать приложение, используя диаграммы в угловых единицах, используя svg, и я также обнаружил, что d3.js может помочь в этом.Но сначала я сократил код, потому что простой d3.select (..). On (click) не работает хорошо.Я довольно плохо знаком с машинописью.

Вот HTML:

<button id="button1" class="btn btn-success" (click)="onButton1()">
Button 1</button>
<button id="button2" class="btn btn-danger">Button 2</button>
<br>
<svg width="1000" height="500" style="background-color: aqua"></svg>

И .ts:

import { Component, OnInit } from '@angular/core';
import * as d3 from "d3";

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

  user_id:number = 1;

  ngOnInit(){

    d3.select("#button2")
      .on("click", this.onButton2);

  }

  onButton1(){
    console.log("button 1 was clicked, user_id: " + this.user_id);
  }

  onButton2(){
    console.log("button 2 was clicked, user_id: " + this.user_id);
  }

}

На консоли: Angular работает в режиме разработки.Вызовите enableProdMode (), чтобы включить производственный режим.

app.component.ts: 22 была нажата кнопка 1, user_id: 1

app.component.ts: 26 была нажата кнопка 2, user_id: undefined

Из привязки d3.select ... метод не обращается к поданному классу, в чем может быть проблема?

Answer 1

Я не уверен, почему вы добавляете событие динамически. и в этом проблема его потери ссылки this.

this будет отличаться для d3 и Angular

Я бы посоветовал не использовать динамическое связывание событий, лучше использовать click событие и передать $event

Оформить заказ, надеюсь, это поможет