Как получить данные JSON в компонент диалога - PullRequest
Новая
       20

Как получить данные JSON в компонент диалога

1 голос
/ 17 апреля 2019

Перед этим данные 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 отображались

Ответы [ 2 ]

3 голосов
/ 17 апреля 2019

Когда вы создаете свой диалог в компоненте поставки, вы можете определить входные данные для вашего компонента диалога, таким образом: 

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 является только примером, вы можете передать все, что вы хотите, диалоговому компоненту.

2 голосов
/ 17 апреля 2019

Попробуйте что-то вроде этого.

Первый метод откроет диалоговое окно и передаст все данные проекта 

 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);
}
...