在弹出窗口中显示多个已选择角度的图像答案

【问题标题】：showing multiple images in popup which are already chosen angular在弹出窗口中显示多个已选择角度的图像
【发布时间】：2021-03-27 22:34:50
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： javascript angular typescript angular6 angular5

【解决方案1】：

在此处查看此答案Image preview before upload in angular 5 因此，您应该在上传后阅读文件以便预览它们。这可以通过添加以下函数来完成：

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>

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

【讨论】：

我已经找到了解决方案，但还是谢谢（接受）