如何使用angular很好且安全地显示XML字符串

Question

我使用的是角度5，但我在问题上停留了一段时间，却找不到答案。
简而言之，我的程序正在从服务中获取一些XML作为字符串（当每个查询是映射中的键时），并且假定不显示它，所以XML本身有点长，而且并非总是正确地格式化。 我尝试使用xml-beatifier，但它一直抛出与XML格式有关的错误。
任何帮助将不胜感激！

---

仅供参考
我的程序设法显示XML，但显示为长（难看）字符串。
FYI 2
我是Angular的新手，并且对Web应用程序非常了解

---

我的.ts代码：

...
import beautify from 'xml-beautifier';

@Component({
    selector: 'obj-fetch',
    templateUrl: './obj-fetch.html',
    styleUrls: ['../base-components/obj-fetch.css'],
    providers: [ElkService],
})

export class ObjFetch extends ObjFetchBase {


    @Input("raj")
    public chosenRaj: string;
    logLines: any;
    objEntries: string[];

    constructor(private elkService: ElkService) {
        super();
        this.name = "Request-Response";
    }

    fetch() {
        this.index = -1;
        this.fetchDisabled = true;
        this.logLines = null;
        this.objEntries = [];
        this.panelMessage = '';
        if (this.chosenobjs) {
            this.elkService.getRequestResponse(this.chosenObjs, this.chosenTemplate, this.chosenEnv, this.chosenDate, this.chosenRaj).subscribe(
                (requestResponse: Map<string,string>) => {
                    this.objEntries = Object.keys(requestResponse);
            if (requestResponse === null || this.objEntries.length === 0) {
                this.panelMessage = "no logs per the above data";
            } else {
                for (const [key, value] of Object.entries(requestResponse)) { 
                    console.log("one")
                    requestResponse[key] = beautify(value+''); //Keep throwing error. 
                }
                this.logLines = requestResponse;
                this.fetchDisabled = false;
                this.index = 0;
            }
        } , (error: any) => {
            this.panelMessage = error.message;
        });
       } else {
        this.panelMessage = "Obj must be specified to in order to get logs";
        }
    }
}

我的.html文件：

<p-accordion [activeIndex]="index">
    <p-accordionTab [disabled]="fetchDisabled">
        <p-header>
            <span class="acc-query-name">{{name}}</span>
            <button pButton type="button" class="accordionButton ui-button-info" (click)="fetch()" label="Run" ></button>
            <span class="acc-query-header-details">{{panelMessage}}</span>
        </p-header>
        <div *ngIf="logLines && logLines.length != []">
            <p-fieldset *ngFor="let objEntry of objEntries" [toggleable]="true">
                <p-header class="fieldSetHeader">{{objEntry}}</p-header>
                <div *ngFor="let line of logLines[objEntry]">
                    {{line}}
                </div>
            </p-fieldset>
        </div>
    </p-accordionTab>
</p-accordion>