Angular Promise 中的绑定在 ngOnInit 中不起作用

Question

在 Angular 中，我使用一个简单的函数 return Promise，在 'then' 函数中，我更改了 Img html 标签的 src。当我从 NgOnInit（或从 onclick）调用此函数时，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,

Angular Promise 中的绑定在 ngOnInit 中不起作用

Angular binding in Promise not work in ngOnInit

binding

promise

ngoninit

angular