首页 > 解决方案 > 在 matDailog (Angular 9+) 中注入后在 json 视图中显示数据

问题描述

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

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

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

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

标签: angularangular-materialjson-viewmat-dialog

解决方案


您必须在构造函数中注入 @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
    }
});

推荐阅读