У меня есть предопределенный массив объектов, которые я собираюсь обновить, выполнив некоторые операции.Я показываю массив на модальном угловом материале, для этого я использую Диалог материала
Я передаю свой массив объектов через свойство данных openDialogue ().Он отображается правильно.Но когда я пытаюсь отредактировать его и открыть этот модал, этот модал не показывает обновленные данные.Чтобы увидеть обновленные данные, мне нужно перезагрузить страницу.
Ниже мой код:
Предопределенный файл массива - 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-файл, по которому открывается модальный файл:
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);
})
}
})
}
файл шаблона:
<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[i].checked == true">
<mat-checkbox [checked]="therapistdetails.workMethod[i].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[i].checked == true">
<mat-form-field
floatPlaceholder="never"
class="margin-top-25px example-full-width">
<input
matInput
class="input"
[(ngModel)]="therapistdetails.workMethod[i].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[i].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[i].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>
это модальный TSфайл:
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');
}
модальный html-файл:
<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>
При начальной загрузке страницы он работает правильно.Но когда я изменяю модальность и открываю ее заново, измененное значение не отображается.Пожалуйста, помогите мне.