angular - 在表行中格式化 XML

Question

我想在 Angular 6 应用程序中格式化包含 XML 数据的表行。我试过这个:

<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 数据。但目前它显示为字符串。当我将它加载到我的 HTML 页面时，我想正确地格式化它。有没有办法实现它？

Answer 1

您不能使用 angular-pretty-xml - 它是为 AngularJS 而不是 Angular2 制作的。但是您可以从此模块获取代码并为您的项目创建一个管道。您可以在此处查看此类管道的示例: https://github.com/krtnio/angular-pretty-xml/issues/4#issuecomment-271728020