angular - จัดรูปแบบ XML ในแถวตาราง

ฉันต้องการจัดรูปแบบแถวตารางที่มีข้อมูล XML ในแอป Angular 6 ฉันได้ลองทำดังนี้:

<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>

ส่วนประกอบ :

@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;
          }
        });
      }
    });
  }
}

บริการ :

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

เรื่อง :

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

ในกรณีของฉัน message มีข้อมูล XML แต่ปัจจุบันมันถูกแสดงเป็น String ฉันต้องการจัดรูปแบบให้ถูกต้องเมื่อโหลดลงในหน้า HTML ของฉัน มีวิธีใดที่จะทำให้มันเป็นไปได้บ้าง?

คำตอบ #1

เราใช้ vkbeautify เพื่อแสดงผล xml ดังนั้น ให้ใช้คำสั่ง npm install vkbeautify

จากนั้นสร้างไฟล์ xml.pipe.ts

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);
    }
}

คุณจำเป็นต้องเพิ่มสิ่งนี้ลงใน declarations ใน appModule ของคุณ จากนั้นในไฟล์ html ของคุณคุณสามารถมี

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

นี่ใช้ได้ผลสำหรับเราในแอป Angular 7 ของเรา

คำตอบ #2

คุณไม่สามารถใช้ angular-pretty-xml ได้ - มันถูกสร้างมาสำหรับ AngularJS ไม่ใช่ Angular2 แต่คุณสามารถนำโค้ดจากโมดูลนี้มาและสร้าง pipe สำหรับโปรเจคของคุณเอง คุณสามารถดูตัวอย่างของ pipe ดังกล่าวได้ที่นี่: https://github.com/krtnio/angular-pretty-xml/issues/4#issuecomment-271728020