首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Angular 6的Angular Material对话框中向afterClosed()传递数据

如何在Angular 6的Angular Material对话框中向afterClosed()传递数据
EN

Stack Overflow用户
提问于 2018-06-05 00:37:37
回答 2查看 8.7K关注 0票数 3

我正在尝试将来自Dialog的数据传递回用户从中打开对话框的组件。下面是我的简单示例:

test.component.ts

import { xDialogComponent } from './../x-dialog/x-dialog.component';
import { xFilter } from './x-filter';
import { xLevelResult, xmodelResult, xpayResult, xpayClassResult, xSpResult } from './../database.service';
import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
import { databaseService, xSigResult, xOutResult, CurxpayResult } from '../database.service';
import { HttpClient } from '@angular/common/http';
import { NgIf } from '@angular/common/src/directives/ng_if';
import { element } from 'protractor';
import { ActivatedRoute } from '@angular/router';
import { MakeGroup, xpayteamResult, xpayteamSPResult, NoticeResult } from '../database.service';
import { DateResult } from '../database.service';
import { DatePipe } from '@angular/common';
import { Router } from '@angular/router';
import {MatSortModule} from '@angular/material/sort';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule, MatCheckboxModule} from '@angular/material';
import {MatTabsModule} from '@angular/material/tabs';
import {Observable, forkJoin} from 'rxjs';
import {mergeMap, expand, map, flatMap, concat, switchMap, combineAll} from 'rxjs/operators';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatFormFieldModule} from '@angular/material/form-field';
import { MatInputModule, MatTableModule, MatPaginatorModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import {MatSnackBar} from '@angular/material';
import { MakeService } from './../../Make.service';
import {MatDialogModule} from '@angular/material/dialog';
import {MatDialogRef, MAT_DIALOG_DATA, MatDialog} from '@angular/material/dialog';



@Component({
  selector: 'app-x',
  templateUrl: './x.component.html',
  styleUrls: ['../style.css']
})
export class xComponent implements OnInit {

  MakeGroups: MakeGroup[];
  xLevelresults: Array<xLevelResult>;
  xmodelresults: Array<xmodelResult>;
  xsigresults: Array<xSigResult>;
  curxpayresults: Array<CurxpayResult>;
  xpayresults: Array<xpayResult>;
  xpayclassresults: Array<xpayClassResult>;
  xpayteamresults: Array<xpayteamResult>;
  xpayteamspresults: Array<xpayteamSPResult>;
  FinalArray: any[] = [];
  x_sp_results: Array<xSpResult>;
  noticeresults: Array<NoticeResult>;
  modelName: string;
  TransactionDate: string;
  MakeName: string;
  delete: string;
  dateselect: string;
  noticedays: number;
  selectedEffect: number;


  // Disablers
  SubmitDisabled: boolean;
  AmountDisabled: boolean;
  DateDisabled: boolean;
  ISDisabled: boolean;
  modelDisabled: boolean;
  SigDisabled: boolean;
  editswitch: boolean;
  nextswitch: boolean;


  // Selection variables for SP Call
  selectedLevel: number;
  selectedAmount: number;
  selectedmodelNbr: number;
  selectedClassId: number;
  Advteam_DRAW_REPAY: number;
  selectedSigId: number;

  // SP Call
  xspcall: string;

  // Date variables
  date: Date;
  selectedDate = '';
  success: boolean;
  tomorrow: number;
  yformat = '';


  // x Outstanding
  xoutresults: Array<xOutResult>;
  x: number;

  constructor(
    private databaseService: databaseService,
    private route: ActivatedRoute,
    private router: Router,
    private MakeService: MakeService,
    public dialogx: MatDialog,

    public snackBar: MatSnackBar
  ) {}


// changes the actual value of the variable for selectedLevel based on user selection
changedLevel (xLevelresult: xLevelResult) {
  // Disable to ensure user enters correct data
  this.SubmitDisabled = true;
  this.DateDisabled = true;
  this.SigDisabled = true;
  this.xpayresults = [];
  this.xsigresults = [];
  this.selectedDate = undefined;
  this.selectedSigId = undefined;
  this.xpayclassresults = [];
  this.xpayteamresults = [];
  this.xpayteamspresults = [];
  this.curxpayresults = [];
  this.FinalArray =  [];
  this.selectedAmount = undefined;
  this.selectedLevel = (xLevelresult ? xLevelresult.Make_Level_Id : 1);
  console.log(this.selectedLevel);
// Populate model Drop-Down
const id = this.route.snapshot.paramMap.get('id');
this.databaseService.getxmodel(id, this.selectedLevel)
  .subscribe(xmodelresults => this.xmodelresults = xmodelresults);
}

// changes the actual value of the variable for selectedmodelNbr based on user selection
changedmodel (xmodelresult: xmodelResult) {
  this.SubmitDisabled = true;
  this.DateDisabled = true;
  this.SigDisabled = true;
  this.selectedDate = undefined;
  this.xpayresults = [];
  this.xsigresults = [];
  this.selectedSigId = undefined;
  this.xpayclassresults = [];
  this.xpayteamresults = [];
  this.xpayteamspresults = [];
  this.curxpayresults = [];
  this.FinalArray =  [];
  this.selectedAmount = undefined;
  this.selectedmodelNbr = (xmodelresult ? xmodelresult.model_Nbr : 1 );

  console.log(this.selectedmodelNbr);
}



// // changes the actual value of the variable for selectedAmount based on user selection
changedAmount (event: any) {

  if (this.editswitch === true) {
    this.SubmitDisabled = true;
    this.DateDisabled = true;
    this.selectedAmount = event.target.value;
    this.xpayresults = [];
    this.xpayclassresults = [];
    this.xpayteamresults = [];
    this.xpayteamspresults = [];
    this.curxpayresults = [];
    this.FinalArray =  [];
    const id = this.route.snapshot.paramMap.get('id');
    // change all values
    this.selectedDate = this.xoutresults[this.x].Calc_Dt;
    this.selectedLevel = this.xoutresults[this.x].Make_Level_Id;
    this.selectedmodelNbr = this.xoutresults[this.x].model_Nbr;
    // Populate form Data
    this.databaseService.getxLevel(id)
    .subscribe(xLevelresults => this.xLevelresults = xLevelresults);
    this.databaseService.getxmodel(id, this.selectedLevel)
    .subscribe(xmodelresults => this.xmodelresults = xmodelresults);
    this.databaseService.getxSig(id, this.selectedLevel, this.selectedDate)
    .subscribe(xsigresults => this.xsigresults = xsigresults);
    // Set Vals
    this.modelName = this.xoutresults[this.x].model_Name;
    this.TransactionDate = this.xoutresults[this.x].Calc_Dt;
    this.MakeName = this.xoutresults[this.x].Make_Level_Name;


    // Populate the outstanding x Requests effecting the current request
    this.databaseService.getCurxpay(id, this.selectedmodelNbr, this.selectedLevel, this.selectedDate)
    .subscribe(curxpayresults => this.curxpayresults = curxpayresults,
      error => console.log('ERROR!'),
      () => {
      // Set the effect on Outs Prin
      if (this.curxpayresults.length === 0) {
        this.selectedEffect = 0;
      } else {
      this.selectedEffect = this.curxpayresults[0].Outstanding_Total;
      }
      // Populate model Level Data
  this.databaseService.getxpay(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect )
      .subscribe(xpayresults => this.xpayresults = xpayresults,
        error => console.log('ERROR!'),
        // Check that Max CMT can cover the request
        () => {    console.log(this.xpayresults[0].reaminder);
          if (this.xpayresults[0].reaminder < 0 || this.xpayresults[0].total < 0) {
            // snack
            if (this.xpayresults[0].reaminder < 0) {
              this.snackBar.open('You:: ' +
               (this.xpayresults[0].reaminder * -1).toFixed(2), 'Close', { duration: 10000} );
            } else {
              this.snackBar.open('You: ' +
               (this.xpayresults[0].total * -1).toFixed(2), 'Close', { duration: 10000} );
            }
            } else {
    // Populate Class and team Level Data for Screen
    this.databaseService.getxpayClass(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect)
    .subscribe(
        (xpayclassresults) => {
            this.xpayclassresults = xpayclassresults;
            for (const xpayclassresult of this.xpayclassresults) {
                this.selectedClassId = xpayclassresult.Class_ID;
                console.log(this.selectedClassId);
                this.databaseService.getxpayteam(id, this.selectedLevel, this.selectedmodelNbr
                  , this.selectedAmount, this.selectedClassId, this.selectedEffect )
                    .subscribe((xpayteamresults) => {
                        this.xpayteamresults = xpayteamresults;
                        this.FinalArray.push(this.xpayteamresults);
                    }, error => console.log('ERROR!'),
                    () => {
                      this.DateDisabled = false;
                      this.SubmitDisabled = false;
                    });
            }
        });

    // Get team Level Data for SP submissions
    this.databaseService.getxpayteamSP(id, this.selectedLevel, this.selectedmodelNbr
      , this.selectedAmount)
    .subscribe(xpayteamspresults => this.xpayteamspresults = xpayteamspresults,
      error => console.log('ERROR!'),
       () => {
       });
            }
        });
      });
  }  if (this.nextswitch === true) {
    this.SubmitDisabled = true;
    this.DateDisabled = true;
    this.selectedAmount = event.target.value;
    this.xpayresults = [];
    this.xpayclassresults = [];
    this.xpayteamresults = [];
    this.xpayteamspresults = [];
    this.curxpayresults = [];
    this.FinalArray =  [];
    const id = this.route.snapshot.paramMap.get('id');

    // Populate the outstanding x Requests effecting the current request
    this.databaseService.getCurxpay(id, this.selectedmodelNbr, this.selectedLevel, this.selectedDate)
    .subscribe(curxpayresults => this.curxpayresults = curxpayresults,
      error => console.log('ERROR!'),
      () => {
      // Set the effect on Outs Prin
      if (this.curxpayresults.length === 0) {
        this.selectedEffect = 0;
      } else {
      this.selectedEffect = this.curxpayresults[0].Outstanding_Total;
      }
      // Populate model Level Data
  this.databaseService.getxpay(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect )
      .subscribe(xpayresults => this.xpayresults = xpayresults,
        error => console.log('ERROR!'),
        // Check that Max CMT can cover the request
        () => {    console.log(this.xpayresults[0].reaminder);
          if (this.xpayresults[0].reaminder < 0 || this.xpayresults[0].total < 0) {
            // snack
            if (this.xpayresults[0].reaminder < 0) {
              this.snackBar.open('You:: ' +
               (this.xpayresults[0].reaminder * -1).toFixed(2), 'Close', { duration: 10000} );
            } else {
              this.snackBar.open('You: ' +
               (this.xpayresults[0].total * -1).toFixed(2), 'Close', { duration: 10000} );
            }
            } else {
    // Populate Class and team Level Data for Screen
    this.databaseService.getxpayClass(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect)
    .subscribe(
        (xpayclassresults) => {
            this.xpayclassresults = xpayclassresults;
            for (const xpayclassresult of this.xpayclassresults) {
                this.selectedClassId = xpayclassresult.Class_ID;
                console.log(this.selectedClassId);
                this.databaseService.getxpayteam(id, this.selectedLevel, this.selectedmodelNbr
                  , this.selectedAmount, this.selectedClassId, this.selectedEffect )
                    .subscribe((xpayteamresults) => {
                        this.xpayteamresults = xpayteamresults;
                        this.FinalArray.push(this.xpayteamresults);
                    }, error => console.log('ERROR!'),
                    () => {
                      this.DateDisabled = false;
                      this.SubmitDisabled = false;
                    });
            }
        });

    // Get team Level Data for SP submissions
    this.databaseService.getxpayteamSP(id, this.selectedLevel, this.selectedmodelNbr
      , this.selectedAmount)
    .subscribe(xpayteamspresults => this.xpayteamspresults = xpayteamspresults,
      error => console.log('ERROR!'),
       () => {
       });
            }
        });
      });
  } else {
  this.xsigresults = [];
  this.selectedSigId = undefined;
  this.SubmitDisabled = true;
  this.DateDisabled = true;
  this.SigDisabled = false;
  this.xpayresults = [];
  this.xpayclassresults = [];
  this.xpayteamresults = [];
  this.xpayteamspresults = [];
  this.curxpayresults = [];
  this.FinalArray =  [];
  const id = this.route.snapshot.paramMap.get('id');
  // Populate Signatory Drop-Down
  this.databaseService.getxSig(id, this.selectedLevel, this.selectedDate)
    .subscribe(xsigresults => this.xsigresults = xsigresults);
  // change amount value
  this.selectedAmount = event.target.value;
  console.log(this.selectedAmount);
  }
    // Populate Values for Notice Days Drop-Down
    const id = this.route.snapshot.paramMap.get('id');
this.databaseService.getNotice(id)
.subscribe(noticeresults => this.noticeresults = noticeresults,
  error => console.log('ERROR!'),
   () => {
     if (this.selectedAmount > 0) {
      this.noticedays = this.noticeresults[0].Min_Repay_Notice_Days;
      console.log(this.noticedays);
     } else {
      this.noticedays = this.noticeresults[0].Min_Adv_Notice_Days;
     }
   });
}

// // changes the actual value of the variable for selectedSigId based on user selection
changedSig (xsigresult: xSigResult) {
  this.SubmitDisabled = true;
  this.DateDisabled = false;
  this.selectedDate = undefined;
  this.xpayresults = [];
  this.xpayclassresults = [];
  this.xpayteamresults = [];
  this.xpayteamspresults = [];
  this.curxpayresults = [];
  this.FinalArray =  [];
  this.selectedSigId = (xsigresult ? xsigresult.Signatory_ID : 1 );
  console.log(this.selectedSigId);
}

  // changes the actual value of the variable for selectedDate based on user selection of the date and pulls corresponding data
  changedDate (event: any) {
    // Disable to ensure user enters correct data
    this.DateDisabled = true;
    this.SubmitDisabled = true;
    // change date value
    this.selectedDate = event.target.value;
    console.log(this.selectedDate);
    this.xpayresults = [];
    this.xpayclassresults = [];
    this.xpayteamresults = [];
    this.xpayteamspresults = [];
    this.curxpayresults = [];
    this.FinalArray =  [];
    const id = this.route.snapshot.paramMap.get('id');
    // Populate the outstanding x Requests effecting the current request
    this.databaseService.getCurxpay(id, this.selectedmodelNbr, this.selectedLevel, this.selectedDate)
  .subscribe(curxpayresults => this.curxpayresults = curxpayresults,
    error => console.log('ERROR!'),
    () => {
      // Set the effect on Outs Prin
      if (this.curxpayresults.length === 0) {
        this.selectedEffect = 0;
      } else {
      this.selectedEffect = this.curxpayresults[0].Outstanding_Total;
      }
      // Populate model Level Data
  this.databaseService.getxpay(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect )
  .subscribe(xpayresults => this.xpayresults = xpayresults,
    error => console.log('ERROR!'),
    // Check that Max CMT can cover the request
    () => {    console.log(this.xpayresults[0].reaminder);
      if (this.xpayresults[0].reaminder < 0 || this.xpayresults[0].total < 0) {
        // snack
        if (this.xpayresults[0].reaminder < 0) {
          this.snackBar.open('You:: ' +
           (this.xpayresults[0].reaminder * -1).toFixed(2), 'Close', { duration: 10000} );
        } else {
          this.snackBar.open('Yo: ' +
           (this.xpayresults[0].total * -1).toFixed(2), 'Close', { duration: 10000} );
        }
        } else {
// Populate Class and team Level Data for Screen
this.databaseService.getxpayClass(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect)
.subscribe(
    (xpayclassresults) => {
        this.xpayclassresults = xpayclassresults;
        for (const xpayclassresult of this.xpayclassresults) {
            this.selectedClassId = xpayclassresult.Class_ID;
            console.log(this.selectedClassId);
            this.databaseService.getxpayteam(id, this.selectedLevel, this.selectedmodelNbr
              , this.selectedAmount, this.selectedClassId, this.selectedEffect )
                .subscribe((xpayteamresults) => {
                    this.xpayteamresults = xpayteamresults;
                    this.FinalArray.push(this.xpayteamresults);
                }, error => console.log('ERROR!'),
                () => {
                  this.DateDisabled = false;
                  this.SubmitDisabled = false;
                });
        }
    });

// Get team Level Data for SP submissions
this.databaseService.getxpayteamSP(id, this.selectedLevel, this.selectedmodelNbr
  , this.selectedAmount)
.subscribe(xpayteamspresults => this.xpayteamspresults = xpayteamspresults,
  error => console.log('ERROR!'),
   () => {
   });
        }
    });
  });
  }

submit() {
  this.DateDisabled = true;
  this.ISDisabled = true;
  this.modelDisabled = true;
  this.SubmitDisabled = true;
  this.AmountDisabled = true;
  this.SigDisabled = true;
  if (this.selectedAmount > 0) {
  for (const xpayteamspresult of this.xpayteamspresults) {
    this.Advteam_DRAW_REPAY = (xpayteamspresult.team_DRAW_REPAY * -1);
    this.xspcall = ('\'' + this.selectedDate + '\',' +
      xpayteamspresult.Make_Level_Debt_ID + ',' + xpayteamspresult.Make_Id +
       ',' + xpayteamspresult.Make_Level_Id + ',' + xpayteamspresult.Class_ID + ',' +
       xpayteamspresult.Debt_ID + ',' + xpayteamspresult.team_ID + ',' +
       xpayteamspresult.team_DRAW_REPAY + ',' + '0' + ',' + this.Advteam_DRAW_REPAY);
       this.databaseService.getxSP(this.xspcall).subscribe(x_sp_results => this.x_sp_results = x_sp_results);
    }
  } else {
    for (const xpayteamspresult of this.xpayteamspresults) {
      this.xspcall = ('\'' + this.selectedDate + '\',' +
        xpayteamspresult.Make_Level_Debt_ID + ',' + xpayteamspresult.Make_Id +
         ',' + xpayteamspresult.Make_Level_Id + ',' + xpayteamspresult.Class_ID + ',' +
         xpayteamspresult.Debt_ID + ',' + xpayteamspresult.team_ID + ',' +
         '0' + ',' + xpayteamspresult.team_DRAW_REPAY + ',' + xpayteamspresult.team_DRAW_REPAY);
         this.databaseService.getxSP(this.xspcall).subscribe(x_sp_results => this.x_sp_results = x_sp_results);
  }
  }
  const id = this.route.snapshot.paramMap.get('id');
  this.router.navigate(['/dashboard', id]);
}

submitEditDel (val) {
  this.dateselect = '';
  this.delete = 'To DELETE an existing entry mark this 0 and submit.';
  this.DateDisabled = true;
  this.ISDisabled = true;
  this.modelDisabled = true;
  this.SubmitDisabled = true;
  this.AmountDisabled = false;
  this.SigDisabled = true;
  this.x = val;
  this.editswitch = true;
  console.log(this.x);
  this.xpayresults = [];
  this.xpayclassresults = [];
  this.xpayteamresults = [];
  this.xpayteamspresults = [];
  this.curxpayresults = [];
  this.FinalArray =  [];
  const id = this.route.snapshot.paramMap.get('id');
  // change all values
  this.selectedDate = this.xoutresults[this.x].Calc_Dt;
  this.selectedAmount = this.xoutresults[this.x].Advance;
  this.selectedLevel = this.xoutresults[this.x].Make_Level_Id;
  this.selectedmodelNbr = this.xoutresults[this.x].model_Nbr;
  // Set Vals
  this.modelName = this.xoutresults[this.x].model_Name;
  this.TransactionDate = this.xoutresults[this.x].Calc_Dt;
  this.MakeName = this.xoutresults[this.x].Make_Level_Name;


      // Populate the outstanding x Requests effecting the current request
      this.databaseService.getCurxpay(id, this.selectedmodelNbr, this.selectedLevel, this.selectedDate)
      .subscribe(curxpayresults => this.curxpayresults = curxpayresults,
        error => console.log('ERROR!'),
        () => {
      // Set the effect on Outs Prin
      if (this.curxpayresults.length === 0) {
        this.selectedEffect = 0;
      } else {
      this.selectedEffect = this.curxpayresults[0].Outstanding_Total;
      }
      // Populate model Level Data
  this.databaseService.getxpay(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect )
      .subscribe(xpayresults => this.xpayresults = xpayresults,
        error => console.log('ERROR!'),
        // Check that Max CMT can cover the request
        () => {    console.log(this.xpayresults[0].reaminder);
          if (this.xpayresults[0].reaminder < 0 || this.xpayresults[0].total < 0) {
            // snack
            if (this.xpayresults[0].reaminder < 0) {
              this.snackBar.open('You:: ' +
               (this.xpayresults[0].reaminder * -1).toFixed(2), 'Close', { duration: 10000} );
            } else {
              this.snackBar.open('You:y: ' +
               (this.xpayresults[0].total * -1).toFixed(2), 'Close', { duration: 10000} );
            }
            } else {
// Populate Class and team Level Data for Screen
this.databaseService.getxpayClass(id, this.selectedLevel, this.selectedmodelNbr, this.selectedAmount, this.selectedEffect)
.subscribe(
    (xpayclassresults) => {
        this.xpayclassresults = xpayclassresults;
        for (const xpayclassresult of this.xpayclassresults) {
            this.selectedClassId = xpayclassresult.Class_ID;
            console.log(this.selectedClassId);
            this.databaseService.getxpayteam(id, this.selectedLevel, this.selectedmodelNbr
              , this.selectedAmount, this.selectedClassId, this.selectedEffect)
                .subscribe((xpayteamresults) => {
                    this.xpayteamresults = xpayteamresults;
                    this.FinalArray.push(this.xpayteamresults);
                }, error => console.log('ERROR!'),
                () => {
                  this.AmountDisabled = false;
                  this.SubmitDisabled = false;
                });
        }
    });
// Get team Level Data for SP submissions
this.databaseService.getxpayteamSP(id, this.selectedLevel, this.selectedmodelNbr
  , this.selectedAmount)
.subscribe(xpayteamspresults => this.xpayteamspresults = xpayteamspresults,
  error => console.log('ERROR!'),
   () => {
   });
  }
});
        });
}


openDialog(): void {
  const id = this.route.snapshot.paramMap.get('id');
  const dialogRef = this.dialogx.open(xDialogComponent, {
    width: '880px'    });
    dialogRef.componentInstance.id = id;
    dialogRef.componentInstance.Levelid = this.selectedLevel;
    dialogRef.componentInstance.modelnbr = this.selectedmodelNbr;
    dialogRef.componentInstance.selectedDate = this.selectedDate;

  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
    console.log(dialogRef.componentInstance.closeMessage);
// Clear All Arrays
this.selectedAmount = undefined;
this.nextswitch = true;
this.DateDisabled = true;
this.ISDisabled = true;
this.modelDisabled = true;
this.SubmitDisabled = true;
this.AmountDisabled = false;
this.SigDisabled = true;
this.xpayresults = [];
this.xpayclassresults = [];
this.xpayteamresults = [];
this.xpayteamspresults = [];
this.curxpayresults = [];
this.FinalArray =  [];
const id = this.route.snapshot.paramMap.get('id');
this.selectedmodelNbr = 2;
// No need to change values as all will remain same except amount

  });
}


  ngOnInit() {
    this.MakeService.changeUrlid(this.route.snapshot.paramMap.get('id'));
  // returns the outstanding x Draw/Repay
   const id = this.route.snapshot.paramMap.get('id');
  this.databaseService.getxOut(id).subscribe(xoutresults => this.xoutresults = xoutresults);
  // get the Make Level data
  this.databaseService.getxLevel(id)
  .subscribe(xLevelresults => this.xLevelresults = xLevelresults);
  // Disable to ensure user enters correct data
  this.SubmitDisabled = true;
  this.DateDisabled = true;
  this.SigDisabled = true;
  // get data for the dynamically chose Make group
    this.databaseService.getGroup(id)
      .subscribe(MakeGroups => this.MakeGroups = MakeGroups);
    // get today's and tomorrows's date
    this.date = new Date();
    this.tomorrow = (Date.now() + 86400000 );
    // format tomorrow's date for the initial run (using tomorrow as this is in the Borrowing Base)
    const d = new Date(this.tomorrow);
    let ym = '' + (d.getMonth() + 1);
    let yd = '' + d.getDate();
    const yy = d.getFullYear();
      if (ym.length < 2) {
        ym = '0' + ym;
      }
      if (yd.length < 2) {
        yd = '0' + yd;
      }
      const yformat = [yy, ym, yd].join('-');
  }

}

test-dialog.component.ts

import { AppRoutingModule } from './../../app-routing.module';
import { Component, OnInit } from '@angular/core';
import {MatDialogModule} from '@angular/material/dialog';
import {MatDialogRef, MAT_DIALOG_DATA, MatDialog} from '@angular/material/dialog';
import { Inject } from '@angular/core';
import { Observable } from 'rxjs';
import { databaseService, NextxResult } from '../database.service';
import { TrackerResult } from '../database.service';
import { HttpClient } from '@angular/common/http';
import { element } from 'protractor';
import { ActivatedRoute, Router, RouterLink, Routes  } from '@angular/router';


@Component({
  selector: 'app-x-dialog',
  templateUrl: './x-dialog.component.html',
  styleUrls: ['../style.css']
})
export class xDialogComponent implements OnInit {

  id: string;

  nextxresults: Array<NextxResult>;
  closeMessage: string;

  constructor(
    private databaseService: databaseService,
    private route: ActivatedRoute,
    private router: Router,
    public dialogRef: MatDialogRef<xDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

    onClose(): void {
      // set the closeMessage property here
    this.closeMessage = 'Pizza!';
    this.dialogRef.close(5);
    }
    screenClick(val) {
console.log(val);
    }

  ngOnInit() {

  this.databaseService.getNextx(this.id)
  .subscribe(nextxresults => this.nextxresults = nextxresults);
  }

}

console.log返回时没有定义,你知道为什么我没有得到“披萨!”吗?

更新了这两个文件的所有代码,希望能更深入地了解我的问题。真的很感谢大家的帮助来解决这个问题!

EN

回答 2

Stack Overflow用户

发布于 2018-06-05 02:28:15

这是一种可能的解决方法,但不是正确的解决方案。您的代码应该按原样工作(according to the documentation),所以还有其他原因导致它崩溃。如果您的代码中没有更多的上下文,将很难确定问题到底是什么。现在,您可以尝试这样做:

test-dialog.component.ts

export class TestDialogComponent implements OnInit {

  id: string;
  nextresults: Array<NextResult>;
  closeMessage: string = "";      

  constructor(
    ...
    public dialogRef: MatDialogRef<TestDialogComponent>, 
    ...) { }

  onClose(): void {
    // set the closeMessage property here
    this.closeMessage = "Pizza!";
    this.dialogRef.close('ref');
  }
  ...
}

test.component.ts

openDialog() {
  const id = this.route.snapshot.paramMap.get('id');
  const dialogRef = this.dialog.open(TestDialogComponent, {
    width: '880px'    });
    dialogRef.componentInstance.id = id;

  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
    // reference the closeMessage property here
    console.log(dialogRef.componentInstance.closeMessage);
  });
}
票数 4
EN

Stack Overflow用户

发布于 2019-06-07 17:50:28

  1. 组件A调用对话框open event
  2. User在该对话框组件(组件B)中键入一些值,然后单击保存
  3. 组件B使用所需的返回调用this.dialogRef.close(this.worksheetName.value),并使用值passed

进行调用

组件A

addWorksheet(): void {
    this.dialogRef = this.dialog.open(CreateWorksheetComponent, { width: '400px' });
    this.afterClosed();
  }
  private afterClosed(): void {
    this.dialogRef.afterClosed().subscribe((worksheetName: string) => {
      console.log(worksheetName)
      this.createWorksheet(worksheetName);
    });
  }

组件B

createWorksheet(): void {
    if (this.worksheetName.valid) {
      this.dialogRef.close(this.worksheetName.value);
    }
  }

  errorMessage(): void {
    return Config.ErrorMessages.InvalidWorksheetName;
  }

  cancel(): void {
    this.dialogRef.close();
  }

组件B HTML

<div>
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Ansichtiname" [formControl]="worksheetName">
    <mat-error *ngIf="worksheetName?.invalid">{{errorMessage()}}</mat-error>
  </mat-form-field>
</div>
<mat-card-actions>
  <button mat-button (click)="cancel()">Abbrechen</button>
  <button mat-button (click)="createWorksheet()" [disabled]="worksheetName?.invalid">Speichern</button>
</mat-card-actions>
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50685108

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档