Рендеринг XML в Angular 2+

Question

Я читаю другие сообщения, похожие на эту проблему, но я все еще не могу правильно отобразить мой xml в своем приложении.

Я использовал следующее, чтобы подготовить свой xml:

  const parser = new DOMParser();
  const xml = parser.parseFromString(response, 'application/xml');
  this.questionSet = xml.documentElement;

  console.log(this.questionSet);

Это то, что находится в консоли:

Как я могу теперь отобразить это в HTML?

Imв настоящее время пытается это:

<div class="application-xml" innerHtml="{{questionSet}}"></div>

Но это просто печать: [элемент объекта]

Любая помощь будет здорово, спасибо

Answer 1

Угловая защита Блокирует динамический рендеринг HTML и других скриптов.Вам необходимо обойти их, используя DOM Sanitizer.

Подробнее читайте здесь: Angular Security

НЕ вносите изменения в свой код:

// in your component.ts file

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


// in constructor create object 

constructor( 
...
private sanitizer: DomSanitizer

...
){

}

someMethod(){

  const parser = new DOMParser();
  const xml = parser.parseFromString(response, 'application/xml');
  this.questionSet = xml.documentElement;
  console.log(this.questionSet);
  
 this.htmlData = this.sanitizer.bypassSecurityTrustHtml( this.questionSet); // this line bypasses angular scurity
 
 

}

 

<!-- In Your html file-->

<div [innerHtml]="htmlData">
   
</div>

Вот демоверсия StackBlitz

Answer 2

Попробуйте указать innerHtml свойство в скобках: <div class="application-xml" [innerHtml]="questionSet"></div>.