Свойство привязки angular2 + <object>svg data

Question

Я пробовал много попыток связать путь данных SVG, но никто не работает Вот мой код:

<div *ngFor="let icon of icons"">
    <object type="image/svg+xml" [data]="icon.path"></object>
</div>

Ts:

    public icons = [ {name: '...', path: '/svg/...svg', href: 'https://...'},..,];

Я пытался использовать [data], data = "{{...}}" и так далее. Я не получаю никакой конкретной ошибки, просто я не могу визуализировать какое-либо изображение. Я использую тег объекта, чтобы иметь возможность динамически изменять свойство «заливка». Я попытался напрямую написать путь в свойстве data тега object, и он работает правильно. Есть идеи как решить проблему?

Answer 1

А как же attr.data?

<div *ngFor="let icon of icons"">
    <object type="image/svg+xml" [attr.data]="icon.path"></object>
</div>

как показано здесь .

EDIT:

Было бы лучше санировать путь раньше.

<!-- COMPONENT -->

    import { DomSanitizationService } from '@angular/platform-browser';

    @Component({
      ...
    })
    export class SvgComponent {

      private sanitizer;

      constructor(sanitizer: DomSanitizationService ) {
        this.sanitizer = sanitizer;    
      }

      svgURL(url) {
        return this.sanitizer.bypassSecurityTrustUrl(url);
      }
    }

<!-- TEMPLATE -->

    <div *ngFor="let icon of icons"">
        <object type="image/svg+xml" [attr.data]="svgURL(icon.path)"></object>
    </div>