Question

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

这是角度分量的视图 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

错误消息

找不到类型为“个人资料图片”的其他支持对象“ [object HTMLInputElement]”。 NgFor仅支持绑定到数组等Iterable。

Answer 1

您输入的内容也被标记为Gallery。尝试更改它。

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

将图像存储到数组中并以角度视图显示

1 个答案: