Angular 11中如何重新初始化PrimeNG Galleria实现选中图片动态更新

• PrimeNG Galleria组件默认使用OnPush变更检测策略，仅当输入属性value的引用发生变化时才会重新渲染视图。你直接调用Array.push()修改数组不会改变数组本身的内存引用，因此Galleria感知不到数组更新。
• 原生*ngFor默认会深度监听数组内容的变化，所以即使引用不变，新增元素也能正常渲染。
• 补充问题：你当前的Galleria caption模板中调用了item.title和item.alt属性，但previews数组存储的是纯base64字符串，不存在这两个属性，后续渲染标题时也会报错。

方案1：所有图片读取完成后一次性赋值新数组（最推荐） #

修改TS代码，等所有FileReader异步读取完成后，生成新的数组赋值给previews，直接变更引用即可触发组件更新：

import { forkJoin, Observable } from 'rxjs';

onSelectImages(event) {
  this.selectedImages = event.currentFiles;
  if (!this.selectedImages?.length) {
    this.previews = [];
    return;
  }
  // 将每个文件读取为base64的异步操作包装为Observable
  const readTasks: Observable<string>[] = this.selectedImages.map(file => {
    return new Observable(subscriber => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (e: any) => {
        // 若需要保留标题属性，此处可返回对象：subscriber.next({url: e.target.result, title: file.name, alt: file.name})
        subscriber.next(e.target.result);
        subscriber.complete();
      };
      reader.onerror = err => subscriber.error(err);
    });
  });
  // 等待所有读取任务完成，一次性赋值新数组
  forkJoin(readTasks).subscribe(res => {
    // 直接赋值新数组，变更引用触发Galleria重新渲染
    this.previews = res;
    // 若上面返回的是对象，需要把模板中img的src绑定改为item.url
  });
}

方案2：单次加载完成即更新（边加载边显示） #

如果不需要等所有图片加载完成再统一显示，加载一张显示一张，可在每次push后用展开运算符生成新数组，变更引用：

reader.onload = (e: any) => {
  this.previews.push(e.target.result);
  // 生成新数组替换原有数组，变更引用
  this.previews = [...this.previews];
};

方案3：手动触发变更检测 #

导入Angular内置的ChangeDetectorRef，每次更新数组后手动触发视图检测：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

// 在onload回调中调用
reader.onload = (e: any) => {
  this.previews.push(e.target.result);
  this.cdr.markForCheck();
};

如果不需要图片标题，可直接删除caption对应的ng-template代码块；如果需要显示标题，将previews数组存储为带title、alt属性的对象，模板中绑定对应属性即可。

内容的提问来源于stack exchange，提问作者Pavan Deshmukh