html - 如何将 JSON 数据获取到 Dialog 组件中

Question

在此之前，将鼠标悬停在信息图标上时会出现 JSON 数据。现在我希望在单击信息图标时将 JSON 数据传递到对话框中。但我不知道如何。

HTML

<h2 mat-dialog-title>Info</h2>

<mat-dialog-actions>
  <button mat-button (click)="matDialogRef.close()">Ok</button>
</mat-dialog-actions>

---

Dialog-Component.ts


import { Component, OnInit, Input, Inject, ViewEncapsulation, HostListener } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { PlannerProject } from 'app/services/planner-projects/planner-project';

@Component({
  selector: 'app-my-dialog',
  templateUrl: './my-dialog.component.html',
  styleUrls: ['./my-dialog.component.scss']
})
export class MyDialogComponent implements OnInit {

  @Input() project: PlannerProject;

  projectData: string;

  constructor(public matDialogRef: MatDialogRef<MyDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit() {
  }

  ngOnChanges(event): void {

  if (event.project !== undefined) {
    this.projectData = JSON.stringify(this.project, null, 2);
  }
}
  ok(): void {
    this.matDialogRef.close();
  }

}

---

Delivery-Order.Component.ts

import { DeliveryOrderEditComponent } from './../delivery-order-edit/delivery-order-edit.component';
import { SelectionModel } from '@angular/cdk/collections';
import { Component, OnInit, ViewChild, OnDestroy, ElementRef, Input, OnChanges } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { PlannerProjectsService } from 'app/services/planner-projects/planner-projects.service';
import { map, switchMap, tap, debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { DeliveryOrdersService } from '../delivery-orders.service';
import { Observable, of, Subscription, fromEvent } from 'rxjs';
import * as moment from 'moment';
import { MatPaginator, MatSort, PageEvent, MatTableDataSource, MatDialog } from '@angular/material';
import * as _ from 'lodash';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
import { DeliveryOrder } from '../delivery-order';
import { MyDialogComponent } from './../my-dialog/my-dialog.component';
import { PlannerProject } from 'app/services/planner-projects/planner-project';
import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
import { UploadExcelService } from 'app/services/upload-excel.service';

@Component({
  selector: 'app-delivery-orders',
  templateUrl: './delivery-orders.component.html',
  styleUrls: ['./delivery-orders.component.scss']
})
export class DeliveryOrdersComponent implements OnInit, OnDestroy, OnChanges {
  @Input() project: PlannerProject;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  selection: SelectionModel<DeliveryOrder>;

  importId: string;
  dataTable;
  sub: Subscription;
 projectData : string;

  // _filter: string;
  _sortBy: string;
  _sortOrder = 'asc';
  _pageSize = 10;
  _pageIndex = 1;

  _options = {
    pageSize: 100,
    pageSizeOptions: [100, 150, 200, 250]
  };

  _displayedColumns = [
    { displayName: 'Location Name', column: 'locationName', sort: true },
    { displayName: 'Delivery Address', column: 'address', sort: false },
    { displayName: 'Is Valid', column: 'isValid', sort: false },
    { displayName: 'Import At', column: 'importedAt', sort: false },
    { displayName: 'File Name', column: 'importFileName', sort: false },
    // { displayName: '', column: '' },
    // { displayName: '', column: '' },
  ];

  _displayColumns: string[] = ['selectRow', 'locationName', 'address', 'quantity', 'weight', 'volume', 'remarks', 'importedAt', 'actions'];

  _actions = [
    {
      text: 'Edit',
      action: (row) => {
        console.log(`row`, row);
      }
    }
  ];

  _dataSource: MatTableDataSource<DeliveryOrder>; // = new DeliveryOrdersDataSource(this.deliveryOrderService, '');
  _filter: string | Observable<string>;

  // @ViewChild('listHeader') listHeader: PageListTemplateComponent;
  @ViewChild('search') search: ElementRef;

  constructor(private route: ActivatedRoute,
              private router: Router,
              private projectService: PlannerProjectsService,
              private deliveryOrderService: DeliveryOrdersService,
              private uploadExcelService: UploadExcelService,
              private _matDialog: MatDialog) { }

              openDialog(): void {
                const Ref = this._matDialog.open(MyDialogComponent, {  
                });

                Ref.afterClosed().subscribe(result => {
                  console.log('The dialog was closed');
                  console.log(result);
                });
              }

  ngOnInit(): void {
    this.initDataTable();
  }

  ngOnDestroy(): void {
    console.log(`destroy`);
    if (this.sub) {
      this.sub.unsubscribe();
    }
  }

  ngOnChanges(): void {
    if (this.project !== undefined) {
      this.projectData = JSON.stringify(this.project, null, 2);
      this.loadList(this.project.importId).toPromise().then((data) => {
        console.log(`data`, data);
        _.map(data, this.formatData.bind(this));
        this.dataTable = data;
        this._dataSource.data = this.dataTable;
        this.selection = new SelectionModel<DeliveryOrder>(true, []);
      });
    }

所以当我点击信息图标时，它会在对话框中显示 JSON 数据。我还添加了 Delivery-order.component。我对 JSON 了解不多，所以我在尝试解决这个问题以使 JSON 值显示方面非常薄弱

Answer 1

当您在交付组件中创建对话时，您可以通过这种方式为对话组件定义输入数据:

const Ref = this._matDialog.open(MyDialogComponent, {  
            data: { id: 'id-value' }
        });

然后您可以在对话组件中恢复您的数据:

constructor(public matDialogRef: MatDialogRef<MyDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { 
    console.log(this.data.id);
}

在此示例中，this.data 将包含从您的主要组件传递到对话框的数据，id 字段只是一个示例，您可以传递任何您想要的对话框组件。