Angular удаляет атрибут данных из innerHTML

Question

У меня есть строка, возвращенная из конечной точки API, как показано ниже:

If you died tomorrow, your wife <span class='person' data-relationship='Relationship.Wife' data-avatarid='1212'>Alice</span> will lose everything.

Итак, чтобы отобразить это как HTML, я использую свойство innter HTML:

<p *ngFor="let con1Died of consequences?.client1Died" [innerHTML]="con1Died"></p>

Но это выводится в браузер с атрибутами данных, вырезанными как:

<p _ngcontent-smy-c63="">If you died tomorrow, your wife <span class="person">Alice</span> will lose everything.</p>

Как я могу вывести это с атрибутами данных? Есть ли способ к этому?

РЕДАКТИРОВАТЬ: Итак, я попробовал метод очистки HTML снизу, но CSS по-прежнему не применяется:

введите описание изображения здесь

this.reportsService.getConsequences().subscribe(res => {
      // Load the consequences to angular
      this.consequences = res;
      this.client1Died = new Array();
      this.consequences.client1Died.forEach(element => {
        const safehtml = this.sanitized.bypassSecurityTrustHtml(element);
        this.client1Died.push(safehtml);
      });
      console.log(this.client1Died);
    });

Answer 1

Создать канал для дезинфекции Html:

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
    constructor(private sanitized: DomSanitizer) {}
    transform(value) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

@Component({
    selector: 'my-app',
    template: `<div [innerHTML]="content | safeHtml"></div>`,
})