primeng - 如何在 Angular 11 中重新初始化 PrimeNg Gallaria

Question

需要将新浏览的图像文件数组绑定到 PrimeNg Gallaria。

但是由于它在初始化和浏览图像文件时在开始时得到空白图像数组，因此带有图像文件的新数组在 primeNg Gallaria 中没有得到更新。

如果有人有任何想法，请帮忙。

加法

代码 HTML -

<p-fileUpload #fubauto1 mode="basic" multiple="multiple" 
     name="demo1[]" accept="image/*"
      maxFileSize="maxImageFileSize" 
      (onSelect)="onSelectImages($event)" 
      chooseLabel="Select Images"></p-fileUpload>
    <p-galleria [(value)]="previews" 
     [responsiveOptions]="responsiveOptions" 
     [containerStyle]="{'max-width': '640px'}"
      [numVisible]="3">
      <ng-template pTemplate="item" let-item>
        <img [src]="item" style="width: 100%; display: block;" />
      </ng-template>
      <ng-template pTemplate="thumbnail" let-item>
        <div class="p-grid p-nogutter p-justify-center">
          <img [src]="item" style="display: block;width: 50%" />
        </div>
      </ng-template>
      <ng-template pTemplate="caption" let-item>
        <h4 style="margin-bottom: .5rem; color: #ffffff;"> 
         {{item?.title}}</h4>
        <p>{{item.alt}}</p>
      </ng-template>
    </p-galleria>

代码角 TS -

onSelectImages(event) {
    console.log(event);
    this.selectedImages = event.currentFiles;

    this.previews = [];
    if (this.selectedImages && this.selectedImages[0]) {
      const numberOfFiles = this.selectedImages.length;
      for (let i = 0; i < numberOfFiles; i++) {
        const reader = new FileReader();
        reader.readAsDataURL(this.selectedImages[i]);
        reader.onload = (e: any) => {
          this.previews.push(e.target.result);
        };
      }
      console.log(this.previews)
    }
  }

正如您在代码中看到的那样，我正在尝试浏览图像文件，然后我必须在 Gallaria 滑块中显示选定/浏览的图像。

因此，在选择/浏览文件后，它们就可以在 Gallaria 中显示。

注意 - 所选文件能够显示为普通图像标签，如下所示 -

<div *ngFor="let item of previews">
  <img [src]="item" style="width: 100%; display: block;" />
</div>

base64 数据图像数组的问题。

标签： primeng