在已选择的弹出窗口中显示多个图像 angular

Question

我有一个 table，它有两列，即 file 和 preview。在文件列中，我提供了选择图像的选项。它可以 select 多张图片，我还编写了可以删除这些图片的代码。

在 preview 列中，我保留了打开模式弹出窗口的按钮（名为 View）。

我的问题： 我想要的是我想显示我在 file 列中 selected 的图像，以将其显示在弹出窗口（在预览列中）作为真实图像（作为图像预览）。

我不知道如何预览它。我试过 ngfor 但做不到。如果您有任何想法，请帮助我，如果我的问题不清楚，请在评论中告诉我。

**我的 stackblitz：**https://stackblitz.com/edit/bootstrap-modal-input-value-pxfnwe?file=app%2Fapp.component.html

Answer 1

在这里查看这个答案所以你应该在上传后阅读文件以便预览它们。这可以通过添加以下函数来完成：

btn(list) {
    list.files.forEach(file => {
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = _event => {
        this.previews.push(reader.result);
      };
    });
    console.warn(this.previews);
  }

并在 HTML 中使用预览，如下所示：

<div *ngFor="let url of previews">
    <img [src]="url" width="150" height ="100">
</div>

已更新 stackblitz https://stackblitz.com/edit/bootstrap-modal-input-value-nvdops?file=app%2Fapp.component.html

在已选择的弹出窗口中显示多个图像 angular

showing multiple images in popup which are already chosen angular

javascript

typescript

angular

angular5

angular6