我使用的是角度6,我有一个打开对话框的按钮。在对话框中,我有一个获取用户数据的表单,然后有两个按钮可以提交和取消。我试图在控制台中显示表单的数据,但是它返回未定义的!有什么问题?这是代码的一部分:
main.component.ts:
import { Work } from '../../../../classes/work_shift';
import { DialogContentComponent} from './dialog-content/dialog-content.component';
export class WorkShiftsComponent implements OnInit {
shifts: Work[];
name: string;
start: string;
end: string;
constructor(public dialog: MatDialog, private shiftService: WorkShiftsService) { }
ngOnInit() {
}
openDialog() {
const dialogRef = this.dialog.open(DialogContentComponent, {
width: '640px',
disableClose: true,
data: {name: this.name, start: this.start, end: this.end}
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
console.log(result);//returns undefined
});
}
}
dialogContent.component.html:
<mat-dialog-content>
<form class="example-form">
<div fxLayout="column" fxLayoutAlign="space-around" class="form">
<div class="input">
<mat-form-field class="input4">
<input matInput placeholder="Shift name">
</mat-form-field>
</div>
<div>
<mat-form-field class="input input2">
<input matInput placeholder="Start" atp-time-picker>
</mat-form-field>
<mat-form-field class="input input2">
<input matInput placeholder="End" atp-time-picker >
</mat-form-field>
</div>
<br/>
</div>
</form>
</mat-dialog-content>
<mat-dialog-actions>
<button class="mat-button" mat-button (click)="onClose()">Cancel</button>
<button class="mat-button" mat-button [mat-dialog-close]="data" cdkFocusInitial color="primary">Create</button>
</mat-dialog-actions>
答案 0 :(得分:9)
对话框组件
<div class="container">
<div class="row">
<div class="col" [innerHTML]="data"></div>
</div>
<div class="row">
<div class="col">
<button (click)="cancel()">No</button>
<button (click)="confirm()">Yes</button>
</div>
</div>
</div>
export class DialogComponent {
// receive data from parent using 'MAT_DIALOG_DATA'
constructor(@Inject(MAT_DIALOG_DATA) public data: string,
private dialogRef: MatDialogRef<DialogComponent>) { }
cancel() {
// send data to parent component
this.dialogRef.close({ data: 'you cancelled' })
}
confirm() {
// send data to parent component
this.dialogRef.close({ data: 'you confirmed' })
}
}
父组件
// method to open dialog
openDialog() {
let dialogRef = this.dialog.open(DialogComponent, {
data: `Are you sure you want to delete?`
})
dialogRef.afterClosed().subscribe(res => {
// received data from confirm-component
console.log(res.data)
})
}
答案 1 :(得分:4)
我使用 EventEmitter 而不是订阅来保存对话框的事件。更多的工作,但更适合解决我的问题。因为大多数情况下您传递的是您在 Dlg 中修改的对象,并且您可能不想将修改传回。该解决方案需要某种深度复制解决方案。
在对话框中:
import { EventEmitter } from '@angular/core';
@Component({...})
export class DlgComponent {
data: any
data: deepCopy(data) // some kindof deep copy solution like lodash
onSave = new EventEmitter();
....
save() {
this.onSave.emit(this.data)
}
在父组件中:
import { MatDialog, MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({...})
export class ParentComponent {
data: any
constructor() {
public dialogRef: MatDialogRef<DlgComponent>,
}
openDlg() {
let dialogConfig = new MatDialogConfig();
const dialogRef = this.dialog.open(DlgmComponent, dialogConfig);
dialogRef.componentInstance.onSave.subscribe(data=> {
this.data = data
})
}
}
答案 2 :(得分:2)
common-pop-service:
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material';
import { PupupFormComponent } from './pupup-form/pupup-form.component'
@Injectable()
export class CommonModelService {
animal: string;
name: string;
date1: any;
date2: any
constructor(public dialog: MatDialog) { }
openDialog(): Observable<any> {
const dialogRef = this.dialog.open(PupupFormComponent, {
width: '250px',
data: { name: this.name, animal: this.animal, date1: this.date1, date2: this.date2 }
});
return dialogRef.afterClosed();
}
}
parent.component.ts:
import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { CommonModelService } from './common-model.service'
export interface DialogData {
animal: string;
name: string;
}
@Component({
selector: 'dialog-overview-example',
templateUrl: 'dialog-overview-example.html',
styleUrls: ['dialog-overview-example.css'],
})
export class DialogOverviewExample {
animal: string;
name: string;
constructor(private commModel: CommonModelService) { }
openDialog() {
this.commModel.openDialog().subscribe(data => {
console.log(data);
});
}
}
parent.component.html:
<button mat-raised-button (click)="openDialog()">Open Form</button>
pup-up-form.html:
<div mat-dialog-content>
<p>What's your favorite animal?</p>
<mat-form-field>
<input matInput [(ngModel)]="data.animal">
</mat-form-field>
<mat-form-field>
<input matInput type="time" atp-time-picker [(ngModel)]="data.date1">
</mat-form-field>
<mat-form-field>
<input matInput type="time" atp-time-picker [(ngModel)]="data.date2">
</mat-form-field>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">No Thanks</button>
<button mat-button [mat-dialog-close]="data" cdkFocusInitial>Ok</button>
</div>
答案 3 :(得分:2)
查看完整的教程Link
只需使用 close()方法
将数据从Dialog组件传递回父对象//dialog-box.component.ts
import { Component, Inject, Optional } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
export interface UsersData {
name: string;
id: number;
}
@Component({
selector: 'app-dialog-box',
templateUrl: './dialog-box.component.html',
styleUrls: ['./dialog-box.component.css']
})
export class DialogBoxComponent {
action:string;
local_data:any;
constructor(
public dialogRef: MatDialogRef<DialogBoxComponent>,
//@Optional() is used to prevent error if no data is passed
@Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
console.log(data);
this.local_data = {...data};
this.action = this.local_data.action;
}
doAction(){
this.dialogRef.close({event:this.action,data:this.local_data});
}
closeDialog(){
this.dialogRef.close({event:'Cancel'});
}
}
然后在父组件中获取事件和数据对象/值
//app.component.ts
import { Component, ViewChild } from '@angular/core';
import { MatDialog, MatTable } from '@angular/material';
import { DialogBoxComponent } from './dialog-box/dialog-box.component';
export interface UsersData {
name: string;
id: number;
}
const ELEMENT_DATA: UsersData[] = [
{id: 1560608769632, name: 'Artificial Intelligence'},
{id: 1560608796014, name: 'Machine Learning'},
{id: 1560608787815, name: 'Robotic Process Automation'},
{id: 1560608805101, name: 'Blockchain'}
];
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
displayedColumns: string[] = ['id', 'name', 'action'];
dataSource = ELEMENT_DATA;
@ViewChild(MatTable,{static:true}) table: MatTable<any>;
constructor(public dialog: MatDialog) {}
openDialog(action,obj) {
obj.action = action;
const dialogRef = this.dialog.open(DialogBoxComponent, {
width: '250px',
data:obj
});
dialogRef.afterClosed().subscribe(result => {
if(result.event == 'Add'){
this.addRowData(result.data);
}else if(result.event == 'Update'){
this.updateRowData(result.data);
}else if(result.event == 'Delete'){
this.deleteRowData(result.data);
}
});
}
addRowData(row_obj){
var d = new Date();
this.dataSource.push({
id:d.getTime(),
name:row_obj.name
});
this.table.renderRows();
}
updateRowData(row_obj){
this.dataSource = this.dataSource.filter((value,key)=>{
if(value.id == row_obj.id){
value.name = row_obj.name;
}
return true;
});
}
deleteRowData(row_obj){
this.dataSource = this.dataSource.filter((value,key)=>{
return value.id != row_obj.id;
});
}
}