привязка переменной к тегу абзаца в угловых 2

Question

Я не знаю angular 2 очень хорошо, и я знаю, что это простая вещь, но я, кажется, не могу это понять.

export class ActivityDesignerComponent {

whatever: any;

@ViewChild('canvasTest') canvasTest: ElementRef;


constructor() {}

// Mouse Sidebar Actions
openMouseNav() {
document.getElementById("mouse_sidenav").style.width = "292px";
}

closeMouseNav() {
document.getElementById("mouse_sidenav").style.width = "0";
}

mouseClickNav() {

document.getElementById('mouseClickNav').style.width = '319px';

let ctx: CanvasRenderingContext2D = 
this.canvasTest.nativeElement.getContext('2d');

ctx.canvas.addEventListener('mousemove', function (event) {
  var mouseX = event.clientX - ctx.canvas.offsetLeft;
  var mouseY = event.clientY - ctx.canvas.offsetTop;
  // var status = document.getElementById('status');
  // status.innerHTML = mouseX + ' | ' + mouseY;
});

ctx.canvas.addEventListener('click', function (event) {
  var mouseX = event.clientX - ctx.canvas.offsetLeft;
  var mouseY = event.clientY - ctx.canvas.offsetTop;
  console.log('Mouse Click At:', mouseX + ' | ' + mouseY);

  this.whatever = mouseX;

});


}

}

Консоль просто логирует.

Я хочу вывести переменную mouseX для тега абзаца в HTML.Я считаю, что это достигается с помощью [(ngModel)], но я не могу понять, как.идеи?

Answer 1

Отслеживание ответа пользователя 184994 ...

Значение this не сохраняется в ваших двух прослушивателях событий.

Отредактируйте вашу функцию, чтобы использовать Синтаксис стрелки ES6 , и this.whatever обновится, как ожидается.

ctx.canvas.addEventListener('click', (event) => {
  var mouseX = event.clientX - ctx.canvas.offsetLeft;
  var mouseY = event.clientY - ctx.canvas.offsetTop;
  console.log('Mouse Click At:', mouseX + ' | ' + mouseY);

  connsole.log(this); // `this` is now equal to an instance of ActivityDesignerComponent

  this.whatever = mouseX;

});

В качестве альтернативы, вы можете вообще отказаться от использования анонимных функций,Переместив свою логику в метод ActivityDesignerComponent, вы также можете сохранить значение this, используя метод связывания .

updateMousePos(): void {
   const mouseX = event.clientX - ctx.canvas.offsetLeft;
   const mouseY = event.clientY - ctx.canvas.offsetTop;
   console.log('Mouse Click At:', mouseX + ' | ' + mouseY);

   connsole.log(this); // `this` is still equal to an instance of ActivityDesignerComponent

   this.whatever = mouseX;
}

....

ctx.canvas.addEventListener('click', this.updateMousePos.bind(this);

Рабочий пример для StackBlitz.

Стоит добавить, что это поведение не является уникальным для Angular или даже TypeScript.Вот как работает JavaScript.