Angular binding in Promise not work in ngOnInit

Question

In Angular, I use a simple function that return a Promise and in 'then' function I change src of an Img html tag. when I call this function from NgOnInit (or from onclick), html will not update until i force the content to reload by another click on something. but colsole.log work.

  click1() {
    this.loadCaptcha();
  }

  ngOnInit(): void {
    this.loadCaptcha();
  }

  loadCaptcha() {
    this.apiService.getCaptcha()
      .then((data) => {
        this.image = 'http://....' + data.id;
        console.log(data);
      });
  }

<img [src]='image' (click)="click1()" />

Answer 1

I solve that, the problem is a line of code that exists in Metronic template that disabled data binding. by disabling changeDetection modification, binding worked again.

changeDetection: ChangeDetectionStrategy.OnPush,