Angular 11 渲染循环重复调用函数 如何缓存结果供模板使用

你之前的修改无法正常渲染SVG，是两处逻辑错误导致的：

• svgsData方法仅支持处理单个SVG字符串，你直接把整个preview数组作为参数传入，btoa()接收数组类型参数无法生成合法的base64编码
• 调用svgsData后没有接收返回值，preview数组中存储的始终是原始未处理的SVG字符串，直接绑定到img标签的src属性上，浏览器无法识别解析。

调整TS侧数据预处理逻辑 #

保留原有单个SVG处理方法不变，在获取到接口数据后，遍历当前页需要展示的每一项，提前调用svgsData生成可直接使用的安全资源URL，再赋值给activePage供模板绑定。

preview: any[] = [];
activePage: any[] = [];

// 原有单个SVG处理逻辑无需修改
svgsData(image: string) {
  const base64string = btoa(image);
  return this._sanitizer.bypassSecurityTrustResourceUrl(
    `data:image/svg+xml;base64,${base64string}`
  );
}

previewSvg() {
  this.systemComponent.fetchData().then(data => {
    this.preview = data;
    // 截取当前页数据后，逐行预处理生成安全URL，仅执行一次
    this.activePage = this.preview
      .slice(0, this.pageSize)
      .map(singleSvgItem => this.svgsData(singleSvgItem));
  }).catch(error => {
    console.log(error)  
  });
}

如果后续有翻页、筛选需求，只需要在操作触发时，从preview中取出对应范围的原始数据，用同样的map方式预处理后赋值给activePage即可，不需要重复请求接口。

调整模板绑定逻辑 #

模板中直接绑定预处理完成的安全URL，不需要再调用组件方法：

<div *ngFor="let safeSvgUrl of activePage">
  <img [src]="safeSvgUrl" />
</div>

• SVG转码、安全URL处理逻辑仅在数据获取、翻页/筛选触发时执行一次，不会在Angular每次变更检测循环中重复调用，大幅减少不必要的性能消耗
• 原始SVG数据始终保留在preview数组中，不会被修改，后续复用更灵活
• 不需要新增管道、第三方依赖，改动成本最低

内容的提问来源于stack exchange，提问作者Muhammad Ali