Как обновить SVG Image href динамически в угловых HTML?

Question

Я перебираю список объектов сотрудников, в которых каждый объект имеет imageUrl, и мне нужно использовать этот URL-адрес изображения в svg - Изображение

<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>

Я нехочу перебрать все элементы HTML в JS. Даже если я это сделаю, я хочу отобразить соответствующее изображение

Можно ли как-нибудь динамически добавить этот URL в этот образ, который я пытался использовать {{emp.ImageUrl}}, но это не сработало.

Это URL рабочего примера, где я жестко закодировал URL https://stackblitz.com/edit/angular-pq6r2w

Я хочу добавить URL динамически

Любое предложение будет оценено!

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 на втором изображении, чтобы сделать его видимым на виде.

Answer 2

Я не совсем уверен, что это правильное решение, но оно работает для меня.

Вы можете попробовать это так:

[src]=emp.ImageUrl