I am passing data in an Angular dialog, but in meantime when I edit something in the Dialog it overwrites the data even I didn't save them. For example I have an Object and I click ot edit it. It opens an Angular Dialog with all data of this Object.
Is it possible only to change data when I click save button. I heard about Object.assign it can be useful but didn't know how to use it. I tried with Object.assign
but it didn't work. Why is not working I think that this.data holds another data as the this.data.education. See the code below This is my code of the dialog.
constructor(@Inject(MAT_DIALOG_DATA) public data: EditEducation,
private dialogRef: MatDialogRef<EducationDialogComponent>,
public dataService: ModelDataService) { }
ngOnInit(): void {
if (!this.data.edit) {
this.data.education = {} as SubCategory;
} else {
({education: this.data.education} = Object.assign({}, this.data));
}
}
And this is how I open the dialog.
<ul>
<li class="fa fa-pencil addIconTop" (click)="editEducation({edit: true, education: subCategory, model: model})"></li>
<button (click)="addEducation({edit: false, model: model})" class="btn"><i class="fa fa-plus addIconBottom"></i></button>
<button [disabled]="education.subCategories.length === 1" (click)="deleteSubCategory(i)" class="btn"><i class="fa fa-trash deleteIconRight"></i></button>
<li class="fa fa-arrow-down moveIconDown"></li>
<li class="fa fa-arrow-up moveIconTop"></li>
</ul>
public editData(data: EditEducation) {
this.dialog.open(DataDialogComponent, {
data,
});
}
public addData(data: EditEducation) {
this.dialog.open(DataDialogComponent, {
data,
});
}
This is one interface to see if is one new Object or is need to be edited.
export interface EditEducation {
education?: SubCategory;
edit?: boolean;
model?: Model;
}
from Angular Dialog changes are overwriting always the UI
No comments:
Post a Comment