Arrays 响应到达后，阵列未得到更新_Arrays_Angular_Angular6

Arrays 响应到达后，阵列未得到更新

arrays angular angular6

Arrays 响应到达后，阵列未得到更新,arrays,angular,angular6,Arrays,Angular,Angular6,我有预定义的对象数组，我将通过执行一些操作来更新这些对象。我正在使用材质对话框 import { workMethod } from '../../../shared/workMethod'; ngOnInit() { this.userservice.makeAPICall(this.userservice.postMethod, this.userservice.gettherapistprofile, data, (response) => { //

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

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);
        })
      }
    })
  }

我通过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
    }
]

<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>

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');
  }

<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>

打开modal的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);
        })
      }
    })
  }

模板文件：

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
    }
]

<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>

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');
  }

<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>

模式html文件：

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
    }
]

<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>

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');
  }

<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>

在初始页面加载时，它工作正常。但当我在模式中更改并重新打开它时，更改的值不会显示。请帮助我。

我不确定，但可能需要使用“通过关闭模式窗口发射”

比如：

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

注意：从组件发送的数据和发送到组件的数据必须相同。尝试发送表单并在模式窗口中跟踪您在表单中推送的内容。出现问题的原因是模式对话框返回的数据与原始数据的结构不同。您的输出数据具有如下结构：

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

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>

而您的源结构是：

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

您应该像这样设置

setCheckBoxValue

方法：

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

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>

类似地，按如下方式更改模板：

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

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>


{{data.title}


取消
证实

工作突击-

希望有帮助。

您能为您的客户创建一个stackblitz吗code@Sasi，我正在努力创造，但什么也没有发生。。只有加载器正在加载。没有它你不可能检查吗？好的。。我试过stackblitz。。希望你能明白。以下是链接：在这一行中，您将在结果中获得新数据<代码>dialogRef.afterClosed（）.subscribe（结果=>{}然后在下一个打开模式之后，您需要发送新数据并将其推送到您的fb=）以下是链接：您从组件发送的数据和发送到组件的数据必须相同。试着把表格寄出去。类似于

this.thisDialogRef.close（this.orderForm.value）

并跟踪在模式窗口中推入表单的内容我使两侧的数据相同，并将响应分配给workMethod数组。而且它工作正常。。谢谢@Stas.。谢谢@user2216584，你和Stas的答案几乎相同。这对我很有用。。谢谢……）