Angular动态表单场景下如何将路径值绑定到景点数组的图片展示组件

实现步骤如下 #

1. 修正表单回填逻辑

你现有回填代码遗漏了section表单组的创建和插入逻辑，修正后代码：

this.find(this.id).subscribe((data) => {
  const destinationSection = this.profile.get('sections') as FormArray;
  destinationSection.clear();
 
  data.sections.forEach((item) => {
    // 创建对应section表单组
    const section = this.createDestinationSection();
    section.patchValue({ city: item.city });
    const pointsArray = section.get('pointsOfInterests') as FormArray;
    pointsArray.clear();

    item.pointsOfInterests.forEach((b) => {
      const pointsOfInterest = this.arrivalGuideService.newPointOfInterest();
      const imagesArray = pointsOfInterest.get('images') as FormArray;
      imagesArray.clear();

      b.images.forEach((i) => {
        imagesArray.push(this.fb.group({
          path: [i.path],
          alt: [i.alt],
          type: [i.type]
        }));
      });
      pointsArray.push(pointsOfInterest);
    });
    destinationSection.push(section);
  });
  // 回填根表单name字段
  this.profile.patchValue({ name: data.name });
})

2. 补充TS层的表单获取辅助方法

确保模板能正确拿到嵌套FormArray：

// 获取指定索引section下的兴趣点FormArray
pointsOfInterest(sectionIndex: number): FormArray {
  return this.profile.get(`sections.${sectionIndex}.pointsOfInterests`) as FormArray;
}

// 获取指定section、指定兴趣点下的图片/视频FormArray
images(sectionIndex: number, poiIndex: number): FormArray {
  return this.profile.get(`sections.${sectionIndex}.pointsOfInterests.${poiIndex}.images`) as FormArray;
}

3. 修改模板绑定逻辑

不需要单独声明videoPath变量，直接从当前FormGroup中取值即可，同时兼容图片展示：

<div *ngFor="let pointsOfInterest1 of pointsOfInterest(destinationIndex).controls ; let pointsOfInterestsIndex=index">
  <div [formGroupName]="pointsOfInterestsIndex">
    <div *ngFor="let image of images(destinationIndex, pointsOfInterestsIndex).controls; let imageIndex=index">
      <div [formGroupName]="imageIndex">
        <div class="image-wrapper edit-highlight-img mr-2 mb-2 mt-2" >
          <!-- 视频类型用video标签 -->
          <video
            *ngIf="image.get('type').value === 'video'"
            [src]="imagePath + image.get('path').value"          
            height="100"
            width="150"
            controls
          ></video>
          <!-- 图片类型用img标签 -->
          <img
            *ngIf="image.get('type').value === 'image'"
            [src]="imagePath + image.get('path').value"
            [alt]="image.get('alt').value"
            height="100"
            width="150"
          >
        </div>
      </div>
    </div>
  </div>
</div>

补充优化（可选）

如果出现Angular安全路径警告，可以新增安全管道处理路径：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url: string): SafeResourceUrl {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

绑定修改为：[src]="(imagePath + image.get('path').value) | safeUrl"

内容的提问来源于stack exchange，提问作者AG Mohamed