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字段仅是示例，您可以将所需的任何内容传递给对话框组件。

Answer 2

尝试这样的事情。

第一种方法将打开对话框并传递项目的所有数据

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

在对话框中，就像@Simo所说的那样使用
这会将从组件传递的数据注入到对话框

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

如何将JSON数据导入对话框组件

2 个答案: