将图像存储到数组中并将它们显示到 angular 视图中

Question

我正在制作一个图像库，用户可以在其中上传图像并将其显示到视图中，问题是我将图像推入数组但无法将它们显示到视图中。

这是 angular 组件中的视图 gallery.componet.html

              <div class="row">
                <div class="col-md-3">
                  <div class="form-group">
                    <div class="upload-btn-wrapper">
                      <img for="profileImage" src="assets/common/add_image.svg" class="upload-placeholder" />
                      <input #gallery type="file" accept="image/*" name="profile image" (change)="imageUpload($event)"/>
                      <label for="profileImage" class="mt-3 font-weight-bold">Add Photo Gallery</label>
                    </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="gallery" *ngFor="let item of gallery">
                    <img src="{{item}}" width="300px" height="300px">
                  </div>
                </div>
              </div>

获取图像并将其推送到图库数组的函数

gallery.component.ts

gallery = [];
  imageUpload(event) {
    if (event.target.files && event.target.files[0]) {
      const reader = new FileReader();
      reader.readAsDataURL(event.target.files[0]);
      reader.onload = (e: any) => {
        this.gallery.push(e.target.result);
      };
    } 
  }

stackblitz

https://stackblitz.com/edit/angular-z4usrg

错误信息

找不到 'profile image' 类型的不同支持对象“[object HTMLInputElement]”。 NgFor 仅支持绑定到 Iterables，例如数组。

Answer 1

您的输入也被标记为画廊。尝试改变它。

<input #galleryFileInput type="file" accept="image/*" name="profile image" (change)="imageUpload($event)"/>

将图像存储到数组中并将它们显示到 angular 视图中

Store images into array and display them into angular view

javascript

arrays

filereader

angular