Array is not getting updating after response come

I have predefined array of objects which I am going to update by performing some operations. I am displaying array on angular material modal for that I am using Material dialog

I am passing my array of objects via data property of openDialogue(). It is displaying properly. But when I try to editing on it and reopen that modal, that modal is not showing updated data. To see updated data I have to reload the page.

Below is my code:

Predefined array file - workMethod.ts:

export const workMethod: any[] = [
{
text: 'Individual',
price: '',
checked: false
},
{
text: 'Group',
price: '',
checked: false
},
{
text: 'Couples',
price: '',
checked: false
},
{
text: 'Family',
price: '',
checked: false
},
{
text: 'Online sessions',
price: '',
checked: false
}
]


ts file on which modal is opening:

import { workMethod } from '../../../shared/workMethod';

ngOnInit() {
this.userservice.makeAPICall(this.userservice.postMethod,
this.userservice.gettherapistprofile, data, (response) => {
// this is the api call where values from database is coming..

this.therapistdetails = response.data;

if(this.therapistdetails.workMethod &&
this.therapistdetails.workMethod.length) {
this.therapistdetails.workMethod.forEach((method) => {
workMethod.forEach((type) => {
if(type.text == method.workMethodType && method.checked) {
type.checked = true;
type.price = method.setPrice;
}
})
})
}
})
}

// this is the function by which on click it will open modal
addWorkMethodModal() {
let workMethodData = {
title: 'Work Method',
data: workMethod
}
// console.log('work method... ', workMethodData);
let dialogRef = this.dialog.open(ModalDialogComponent, {
width: '500px',
data: workMethodData,
})

dialogRef.afterClosed().subscribe(result => {
// console.log('after closed value... ', result);
if (result && result.action && result.action == 'workMethod') {
if(result.workMethod && result.workMethod.length) {
result.workMethod.forEach(element => {
element['workMethodType'] = element['checked'];
element['checked'] = element['selected'];
element['setPrice'] = element['price'];

delete element['price'];
delete element['selected'];
});
}
let data = {
userID: this.id,
workMethod: result.workMethod
}
this.userservice.makeAPICall(this.userservice.postMethod, this.userservice.updateWorkMethod, data, (response) => {
console.log('response... ', response);
this.therapistdetails.workMethod = response.data;
this.dataToPush.next(response.data);
})
}
})
}


template file:

<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"
*ngFor="let workmethod of therapistdetails.workMethod; let i=index">
<div *ngIf="workmethod" class="row">
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
<p *ngIf="therapistdetails.workMethod.checked == true">
<mat-checkbox [checked]="therapistdetails.workMethod.checked"></mat-checkbox>
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="master" *ngIf="therapistdetails.workMethod.checked == true">
<mat-form-field
floatPlaceholder="never"
class="margin-top-25px example-full-width">
<input
matInput
class="input"
[(ngModel)]="therapistdetails.workMethod.workMethodType"
placeholder="Answer text" >
</mat-form-field>
</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"
*ngIf="therapistdetails.workMethod.checked == true">
<mat-form-field class="example-full-width margin-top-25px">
<input
type="number"
class="input-price"
[(ngModel)]="workmethod.setPrice"
matInput >
</mat-form-field>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<span class="currency"
*ngIf="therapistdetails.workMethod.checked == true">
{{ therapistdetails.currency}}
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p class="Addmore pointer" (click)="addWorkMethodModal()">Add
More</p>
</div>
</div>


this is the modal ts file:

orderForm: FormGroup;
items: FormArray;


ngOnInit() {
if(this.data.data && this.data.data.length) {
console.log('data from component: ', this.data.data);
this.orderForm = this.formBuilder.group({
items: this.formBuilder.array([ ])
})

this.setCheckBoxValue();
}
this.blankForm = this.formBuilder.group({
blankItems: this.formBuilder.array([])
})
}

setCheckBoxValue() {
this.items = this.orderForm.get('items') as FormArray;
this.data.data.forEach((element) => {
this.items.push(this.formBuilder.group({
checked: element.text,
selected: element.checked,
price: element.price
}))
})
}

onCloseCancel() {
this.ref.close('cancel');
}


modal html file:

<div *ngIf="data.data.length" [formGroup]="orderForm">
<div formArrayName="items" *ngFor="let item of orderForm.get('items').controls;let i=index">
<div class="row" [formGroupName]="i">
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
<mat-checkbox formControlName="selected" name="selected" class="ml-a" [checked]="item.controls.selected.value" >
</mat-checkbox>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<mat-form-field
floatPlaceholder="never" class="margin-top-25px example-full-width" >
<input
matInput
class="input" name="checked"
formControlName="checked"
value="{{item.controls.checked.value}}"
placeholder="{{data.title}}"
>
</mat-form-field>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" *ngIf="data.title == 'Work Method'">
<mat-form-field class="example-full-width margin-top-25px">
<input
type="number"
class="input-price"
formControlName="price"
value="{{item.controls.price.value}}"
matInput >
</mat-form-field>
</div>
</div>
</div>
</div>


At the initial page load it is working properly. But when I do change in modal and reopen it, changed value not showing up. What can I try next?

Continue reading...