angular - Formatera XML i tabellrad

Jag vill formatera tabellrad som innehåller XML-data i Angular 6-applikation. Jag försökte detta:

<div class="list">
    <table class="table table-hover">
      <thead>
      <tr>
        <th scope="col">#</th>
        ..............
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let processingLog of processingLogs">
        ...............
        <td>{{processingLog.title}}</td>
        <td>{{processingLog.message}}</td>
      </tr>
      </tbody>
    </table>
  </div>

Komponent :

@Component({
  ..........
})
export class TransactionDetailsComponent implements OnInit {

  processingLogs: ProcessingLogs = new ProcessingLogs(null, null, null, null, null);
  transaction: Transaction;

  constructor(......) { }

  ngOnInit() {
    this.route.params.pipe(
      flatMap(params => {
        ............
      })
    ).subscribe(value => {
      if(value != null) {
        this.transaction = value;
        this.route.params.pipe(
          flatMap(params => {
            if (value.unique_id) {
              return this.processingLogsService.getProcessingLogsList(value.unique_id);
            } else {
              return of(null);
            }
          })
        ).subscribe(value => {
          if (value != null) {
            this.processingLogs = value;
          }
        });
      }
    });
  }
}

Service :

getProcessingLogsList(processingLogsId: string): Observable<Array<ProcessingLogs>> {
    return this.http.get<Array<ProcessingLogs>>(environment.api.urls.processinglogs.getProcessinglogs(processingLogsId));
  }

Ämne :

export class ProcessingLogs {
  constructor(
    public title: string,
    public message: string,
  ) {}
}

I mitt fall innehåller message XML-data. Men för närvarande visas det som en sträng. Jag skulle vilja formatera det korrekt när jag laddar det på min HTML-sida. Finns det ett sätt att implementera det?

Svar #1

Vi använder vkbeautify för att visa XML. Så, npm install vkbeautify

skapa sedan en xml.pipe.ts-fil

import * as vkbeautify from 'vkbeautify';
import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
name: 'xml'
})
export class XmlPipe implements PipeTransform {
transform(value: string): string {
    if (value)
        return vkbeautify.xml(value);
    }
}

Du behöver lägga till detta i deklarationerna i din appModule, och sedan kan du i din html-fil ha

<td>{{processingLog.message | xml}}</td>

Detta fungerar för oss i vår Angular 7-applikation

Svar #2

Du kan inte använda angular-pretty-xml - det skapades för AngularJS, inte Angular2. Men du kan ta koden från denna modul och skapa en pipe för ditt projekt. Du kan se ett exempel på en sådan pipe här: https://github.com/krtnio/angular-pretty-xml/issues/4#issuecomment-271728020

Relaterade artiklar