将 Promise 对象设置为 img [src] 将图像设置为 null..sometimes

Question

我在我的 Electron 应用程序中使用 Angular。我有一个组件，其中包含一个名为files 的对象数组，其中每个file 都有一个名为preview 的成员，它是一个Promise 对象并返回一个file:// 对象。

<mat-list-item *ngFor="let file of files;">
<img mat-list-avatar [src]="file.preview ? (file.preview | async | safe) : 'assets/file.png'"
...

  async getPreview() {
    return new Promise((resolve, reject) => {
      // simplified for example
      resolve("assets/file.png");
    });
  }
  ...
  for (let file in files) {
    file.preview = getPreview();
  }

files 是该组件中的 @Input。当我在父组件中重建这个数组时，我经常得到损坏的图像。 （见下面的截图）。

最终，通过在窗口上移动鼠标，可以正确绘制图像。有谁知道某处是否缺少重绘，或者我如何找出为什么 img src 有时会临时设置为 null？

附：在 safe 管道中，我可以确认在某些情况下传入的值已经为 null，尽管 file.preview 附加了一个 Promise 对象。

谢谢！

重新调整应用窗口焦点后：

在应用窗口上移动鼠标一秒钟后：

Answer 1

你能试试下面的代码吗

for (let file in files) { 
file.preview = getPreview();
} 

this.files=[...this.files]: