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()" />

A.khalifa · Answer 1 · 2021-01-14T20:26:38.447

0

Try this use DomSanitizer

 constructor(private sanitizer: DomSanitizer) { }
 
  ngOnInit() {
  this.apiService.getCaptcha()
      .then((data) => {
        let objectURL = 'data:image/jpeg;base64,' +  data.id;
        this.image  =this.sanitizer.bypassSecurityTrustUrl(objectURL);
        console.log(data);
      });
       
  }
}

Hope useful

edited Jan 14 '21 at 20:26

answered Jan 14 '21 at 19:14

A.khalifa

2,366
3
27
40

i did that too, but it didn't work. i have to click on something like pagination button to view the resutl, in your sample, img element got disable until on click on pagination button. – mojtaba shafaghi Jan 14 '21 at 19:42
i did that in OnClick of a button and have same result. the problem is not related to ngOnInit, that's related to rendering, same question is here: https://stackoverflow.com/questions/61655099/angular-8-metronic-binding-not-updating – mojtaba shafaghi Jan 14 '21 at 20:12

score 0 · Accepted Answer · answered Jan 15 '21 at 15:15

0

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,

answered Jan 15 '21 at 15:15

mojtaba shafaghi

21
4

Angular binding in Promise not work in ngOnInit

2 Answers2