javascript - 如何在 Angular html 中动态更新 SVG 图像 href？

Question

我正在遍历员工对象列表，其中每个对象都有 imageUrl，我需要在 svg - Image 中使用该图像 url

<div *ngFor ="emp of employees">
        <defs>
         <pattern id = "attachedImage" height = "100%" width = "100%" patternContentUnits = "objectBoundingBox">
            <image href="{{emp.ImageUrl}}"  preserveAspectRatio = "none" width = "1" height = "1"/>
        </pattern>
        </defs>
        <circle cx = "50%" cy = "50%" r = "35%" fill = "url(#attachedImage)"/>
    </div>

我不想循环遍历 JS 中的所有 html 元素。即使我这样做，我也想映射适当的图像

有什么方法可以动态地附加这个图片中的 Url我尝试使用 {{emp.ImageUrl}} 但没有用。

这是我对 URL 进行硬编码的工作示例的 URL https://stackblitz.com/edit/angular-pq6r2w

我想动态添加网址

如有任何建议，我们将不胜感激!

Answer 1

您的标记中的问题是您对所有图案图像重复使用相同的 id。结果，第一个图像以所有形状显示。您可以使用 ngFor 循环索引使每个 id 不同:

<div *ngFor="let emp of employees; let i = index">
  ...
  <svg class="circle-chart" ...>
    ...
    <g class="circle-chart__info">
      <defs>
        <pattern [id]="'attachedImage_' + i" ... >
          <image [attr.xlink:href]="emp.ImageUrl" ... />
        </pattern>
      </defs>
      <circle [attr.fill]="'url(#attachedImage_' + i + ')'" ... />
    </g>
  </svg>
</div>

您可以在this stackblitz 中看到结果.请注意，我还在第二张图片上设置了 https 协议(protocol)，以使其在 View 中可见。