как получить доступ к переменным класса внутри диаграммы. js Пользовательский интерфейс всплывающей подсказки - PullRequest
Новая
       19

как получить доступ к переменным класса внутри диаграммы. js Пользовательский интерфейс всплывающей подсказки

0 голосов
/ 25 марта 2020

в приведенном ниже фрагменте кода в пользовательской всплывающей подсказке под всплывающей подсказкой при событии щелчка, когда я пытаюсь использовать эту переменную класса, она отображает значения, относящиеся только к ChartElement 

@Output() valuechange = new EventEmitter<any>();
options: ChartOptions = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
  displayColors: false,
  mode: 'nearest',
  intersect: false,
  enabled: false,
  custom(tooltipModel: any) {
    // tooltip element
    let tooltipEl: any = document.querySelector('#chartjs-tooltip');

    // create element on first render
    if (!tooltipEl) {
      tooltipEl = document.createElement('div');
      tooltipEl.id = 'chartjs-tooltip';
      tooltipEl.style.width = '124px';
      tooltipEl.style.color = 'white';
      tooltipEl.style.borderRadius = '6px';
      tooltipEl.style.backgroundColor = 'rgba(55, 71, 79, 0.8)';
      tooltipEl.innerHTML = '<div style ="display:flex;flex-direction:column">sample tooltip</div>';
      document.body.appendChild(tooltipEl);
    }

      tooltipEl.onclick = () => {
        // NOT ABLE TO Access this to emit event 
        // this.valuechange.emit('test');
        console.log('hi); // working
      };
    }
}

1 Ответ

1 голос
/ 25 марта 2020

Чтобы сделать this равным классу, запишите его как функцию стрелки: 

custom: () => {
 console.log(this); // should be the class
}

Но иногда вам нужен дескриптор this и that, где this - класс и that - это объект Chart.

Создайте служебную функцию: 

export const thisAsThat = (callBack: Function) => {
    const self = this;
    return function () {
      return callBack.apply(self, [this].concat(Array.prototype.slice.call(arguments)));
    };
  }

Тогда: 

import { thisAsThat } from './where/thisAsThat/is/located';
....
custom: thisAsThat((that: any, otherArgument: any) => {
  console.log(this); // the class
  console.log(that); // the chart object
})

TypeScript: как использовать оба жирных стрелка а это?

...