角9垫台和ExpressionChangedAfterItHasBeenCheckedError

Question

我有一个角度9，上面有常春藤，组件有一个以上的垫桌.一个表的行与输入字段绑定到一个反应性窗体。我将表绑定到表单数组。效果很好..。但是，当我用值加载表单数组时，我会得到一个有趣的值："ExpressionChangedAfterItHasBeenCheckedError:表达式在被选中后发生了更改。“以前的值为‘ng-有效’：'true‘。当前值：’false‘错误。

另外，如果我在组件上设置了changeDetection: ChangeDetectionStrategy.OnPush，它可以正常工作，但显然会丢失更改检测.

​

​

这是我的设置(修剪过)：

反应形式：

quoteForm = new FormGroup({
    QuoteNumber:new FormControl(''),
    ContractTerm:new FormControl(''),
    ContractStartDate:new FormControl(''),
    QuoteName: new FormControl('', Validators.required),
   ...
    Items: this.fb.array([])
  });



async ngOnInit(): Promise<void> {
  ...
  this.QuoteItems = await this.CIM.GetQuoteItems(this.CurrentQuoteNumber);
  const itemsArray = this.quoteForm.get('Items') as FormArray;
  ...
  this.QuoteItems.forEach(item => {
      let NewObj = this.fb.group({
      isNew:false,
     ...
     });
     ...
     itemsArray.push(NewObj);
   });    
  }

  this.ItemdataSource=new MatTableDataSource(this.quoteForm.get('Items').value);
  this.ItemdataSource.paginator = this.paginator.toArray()[0];

}

表HTML (裁剪)：

<table mat-table [dataSource]="ItemdataSource" multiTemplateDataRows formArrayName="Items"> 
...
 <tr mat-header-row *matHeaderRowDef="ItemColumns"></tr>
 <tr mat-row *matRowDef="let row; columns: ItemColumns;" class="element-row" [class.expanded-row]="expandedElement === row" (click)="expandedElement = expandedElement === row ? null : row"></tr>
 <tr mat-row *matRowDef="let row; columns: ['SerialNumbers']" class="detail-row"></tr>
  </table>       
</div>
<mat-paginator [pageSizeOptions]="[20, 40, 100]" showFirstLastButtons></mat-paginator>   

不知道如何解决这个问题？在加载包含项的表单后，将得到错误信息。我可以保留两份名单..。一张是桌子的，一张是表格的，但是那会是怎样的一个PIA呢？我遗漏了什么？

Answer 1

如果我在你的描述中没有遗漏重要的东西，你应该试试

在异步代码评估detection

• Manually 之后，在更改

• 上保持onPush策略触发detectChanges

因此，您的组件将类似于：

import { ..., ChangeDetectorRef } from '@angular/core';

@Component({
  ...
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent ... {

  constructor(private cdRef: ChangeDetectorRef) { }


  async ngOnInit(): Promise<void> {
    ...
    this.QuoteItems = await this.CIM.GetQuoteItems(this.CurrentQuoteNumber);
    const itemsArray = this.quoteForm.get('Items') as FormArray;
    ...
    this.QuoteItems.forEach(item => {
      let NewObj = this.fb.group({
        isNew:false,
        ...
      });
      ...
      itemsArray.push(NewObj);
    });    
   }

   this.ItemdataSource = new MatTableDataSource(this.quoteForm.get('Items').value);
   this.ItemdataSource.paginator = this.paginator.toArray()[0];

   this.cdRef.detectChanges();

 }

发生什么事了呢？

在dev模式中，在视图呈现后立即进行角度检查/比较，以查看在上次更改检测和呈现之后是否有任何数据发生了更改。因此，会触发错误，因为上次呈现视图内容后数据发生了更改。

通过设置onPush策略，只有当@输入发生更改时，才会告诉角触发更改检测，否则此节点将被忽略。这样就可以修复错误，但仍然需要手动触发更改检测，以便显示更新的数据。