angular8 - 检查后表达式已更改。以前的值：'mat-focused: false'。当前值：'mat-focused: true'。在角度 8？

Question

html代码：

ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'mat-focused: false'。当前值：'mat-focused: true'。

当我单击包装材料输入时，它给出了这个错误。

<div formArrayName="packageArray" *ngFor="let item of packageArray.controls; let i = index;">
                <div [formGroupName]="i" class="add-div" >
                    <p>Level {{i+1}} Pack</p>
                <div class="d-flex justify-content-between">
                       <mat-form-field>
                             <input matInput type="text"  (click)="addLevelPack(i)" placeholder="Package Material" formControlName="packMaterial" required> 

在这一行，我得到了这个错误

                             </mat-form-field>
                           <mat-form-field>
                                  <input matInput type="text" placeholder="UOM" formControlName="UOM" required>
                          </mat-form-field>
                            <mat-form-field>
                                  <input matInput type="text" placeholder="Quantity" formControlName="Quantity" required>
                            </mat-form-field>
                            <mat-form-field>
                                <input matInput type="text" placeholder="Weight(kgs)" formControlName="weight" required>
                             </mat-form-field>
                         </div>
                    </div>
                 </div>
<div class="btn-custom" (click)="addPackage()">
        <span mat-raised-button style="cursor:pointer">Add packaging +</span>   
    </div>
    <p>Total packaging</p>

       <div *ngFor="let item of packList; let i = index;">

             <div class="file-name ">
                 <div class="d-flex">
                     <div class="p-2">
                     <div class="add-div d-flex justify-content-between">
                    <div> Level {{i+1}} Pack </div>
                    <div>{{item.packMaterial}}</div>
                    <div>{{item.UOM}}</div>
                    <div>{{item.Quantity}}</div>
                    <div>{{item.weight}}</div>
                   </div>
                </div> 
                   <div class="ml-auto p-2">(i need this arrangement also)
                        <mat-checkbox>WHD</mat-checkbox>
                  </div> 
              </div>
             </div>
         </div>


``````````````````````````````````````````````````````
component.ts(ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-focused: false'. Current value: 'mat-focused: true')
````````````````````````````````````````````````````````
ngOnInit() {


    this.packageArray = this.formulationForm.get('packageArray') as FormArray;
    this.addPackage();

  }
  addPackage(){

    this.packageArray.push(this.createPackage());

  }
  createPackage():FormGroup{
     return this.formBuilder.group({
       packMaterial : new FormControl(null, Validators.required),
       UOM :  new FormControl(null, Validators.required),
       Quantity: new FormControl(null, Validators.required),
       weight: new FormControl(null, Validators.required)
     });
  }

 addLevelPack(index){
      this.dialog.open(SelectMaterialComponent, {data :{matList: this.packList , type: "Packaging"}, minWidth: '60vw', minHeight: '40vh'})
       .afterClosed().subscribe( response => {
         if(!!response) {
                console.log(response);

                this.formulationForm.get("packageArray").value.splice(-1, 1);
                this.formulationForm.patchValue({packageArray : [
                  ...this.formulationForm.get("packageArray").value, 
                  { 
                    packMaterial: response[0].title,
                    UOM:  response[0].uom,
                    Quantity: 1,
                    weight: response[0].wt_in_kgs_per_unit
                  }
                ]});
                this.packList = this.formulationForm.get("packageArray").value;



              } 
          }) 
 }

标签： angular8

Answer 1

尝试restoreFocus:false像这样添加您的对话框配置：

this.dialog.open(SelectMaterialComponent, {
restoreFocus:false, // <-- Line to add
data :{matList: this.pack....
  ... } 
})