Promise 中的 Angular 綁定在 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. 當我從 NgOnInit（或從 onclick）調用此 function 時，html 將不會更新，直到我通過再次單擊某些內容來強制重新加載內容。 但 colsole.log 工作。

  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

試試這個使用 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);
      });
       
  }
}

希望有用

Answer 2

我解決了這個問題，問題是 Metronic 模板中存在禁用數據綁定的代碼行。 通過禁用 changeDetection 修改，綁定再次起作用。

changeDetection: ChangeDetectionStrategy.OnPush,