Перерисовка линии холста в Angular на основе ввода

Question

У меня есть вход с двухсторонним связыванием, который должен дать мне число, чтобы я мог нарисовать линию внутри круга на холсте, делая угол этого градуса с центром.

Я думаю, что само двустороннее связывание работает нормально

Но оно не перерисовывает холст для создания угла.Приложение не имеет реакции на ввод.Если я вручную изменяю значение свойства градусов, то оно работает.Я немного искал и узнал о ngOnChanges () , но, похоже, это тоже не работает, по крайней мере, так, как я пытаюсь его использовать.

мой код:

import { ViewChild, Component, OnInit, ElementRef } from "@angular/core";
import { CircleApp } from "./circleApp";
@Component({
  selector: "app-make-circle",
  templateUrl: "./make-circle.component.html",
  styleUrls: ["./make-circle.component.css"]
})
export class MakeCircleComponent implements OnInit {
  circleApp: CircleApp = {
    degrees: 0 
  };
  @ViewChild("myCanvas") myCanvas: ElementRef;
  public context: CanvasRenderingContext2D;
  constructor() {}
  ngOnInit() {}
  ngAfterViewInit(): void {
    this.context = (this.myCanvas
      .nativeElement as HTMLCanvasElement).getContext("2d");
    this.draw();
  }

  ngOnChanges() {
    this.draw();
  }

  private draw() {
    this.context.beginPath();
    this.context.arc(150, 150, 100, 0, Math.PI * 2);
    this.context.moveTo(150, 150);
    this.context.lineTo(
      Math.cos((-this.circleApp.degrees * Math.PI) / 180) * 100 + 150,
      Math.sin((-this.circleApp.degrees * Math.PI) / 180) * 100 + 150
    );
    this.context.stroke();
  }
}