Promise 中的角度绑定在 ngOnInit 中不起作用答案

【问题标题】：Angular binding in Promise not work in ngOnInitPromise 中的角度绑定在 ngOnInit 中不起作用
【发布时间】：2021-04-19 17:51:31
【问题描述】：

在 Angular 中，我使用了一个返回 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()" />

【问题讨论】：

标签： angular promise binding ngoninit

【解决方案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);
      });
       
  }
}

希望有用

【讨论】：

我也这样做了，但是没有用。我必须单击分页按钮之类的东西才能查看结果，在您的示例中，img 元素被禁用，直到单击分页按钮。
我在按钮的 OnClick 中做到了这一点，结果相同。问题与 ngOnInit 无关，与渲染有关，同样的问题在这里：stackoverflow.com/questions/61655099/…

【解决方案2】：

我解决了，问题是 Metronic 模板中存在禁用数据绑定的代码行。通过禁用 changeDetection 修改，绑定再次起作用。

changeDetection: ChangeDetectionStrategy.OnPush,

【讨论】：