响应到来后数组未更新

Question

我有预定义的对象数组，我将通过执行一些操作来更新它们。我正在使用材料对话框

在角材料模态上显示数组

我正在通过openDialogue（）的data属性传递对象数组。它显示正确。但是，当我尝试对其进行编辑并重新打开该模式时，该模式未显示更新的数据。要查看更新的数据，我必须重新加载页面。

下面是我的代码：

预定义的数组文件-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>

在初始页面加载时，它工作正常。但是当我更改模式并重新打开它时，更改的值没有显示出来。请帮帮我。

Answer 1

之所以出现此问题，是因为模态对话框返回的数据与原始数据的结构不同。您的输出数据具有以下结构：

checked: element.text,
selected: element.checked,
price: element.price

您的源代码结构为：

text: 'Individual',
price: '',
checked: false

您应该这样设置setCheckBoxValue方法：

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

类似地，如下更改模板：

<div>
  <h2 mat-dialog-title> {{data.title}} </h2>
  <hr>

  <mat-dialog-content>
    <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="checked" name="selected" class="ml-a" [checked]="item.controls.checked.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="text"
                value="{{item.controls.text.value}}"               
                >
            </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>
  </mat-dialog-content>

  <div>
    <hr>
    <mat-dialog-actions style="float: right">
      <button mat-raised-button (click)="onCloseCancel()" class="btn-style-cancell">Cancel</button>
      <button mat-raised-button (click)="onCloseConfirm()"
       class="btn-style">Confirm</button>
    </mat-dialog-actions>
  </div>
</div>

正在工作的堆叠闪电战-https://stackblitz.com/edit/angular-material-array-h9kqmw?file=src/styles.css

希望有帮助。

Answer 2

我不确定，但是也许您需要通过关闭模式窗口来使用“发射”

类似：

onClose(e) {
    this.dialogRef.close(e)
}

P.S .：从组件发送的数据和发送到组件的数据必须相同。尝试发送表单并在模态窗口中跟踪您在表单中的内容