在 matDialog 中注入后在 json 视图中显示数据（Angular 9+）

Question

我需要在MatDialog 内的 JSON 视图中显示数据。我正在使用 API 获取一些数据，然后使用 MatDialog 的 data 选项将其注入对话框。数据已成功注入，也可在对话框组件中访问。我正在使用ngx-json-viewer package 在 JSON 视图中显示此数据，但它不起作用。 以下是我打开对话框并将数据传递到其中的方式-

const logDetailsDialogRef = this.dialog.open(logDetailsDialog, {
    data: {
        logDetails
    }
});

这是我在模板页面上使用的内容-

<ngx-json-viewer [json]="data.logDetails"></ngx-json-viewer>

Answer 1

您必须在构造函数中注入 @Inject(MAT_DIALOG_DATA) 公共数据。

  constructor(
        @Inject(MAT_DIALOG_DATA) public dataF,
        private sanitizer: DomSanitizer,
    
      )
    
     ngOnInit(): void {
    
    
      this.data = this.dataF;
    
    
      }

这保持不变：

const logDetailsDialogRef = this.dialog.open(logDetailsDialog, {
    data: {
        logDetails
    }
});