각도 : 동적으로 생성 된 FormArray가 많은 FormGroup을 구성원으로 사용하여 페이지가 응답하지 않음

동적으로 생성 된 FormArray이 아래 코드에서 생성됩니다.각도 : 동적으로 생성 된 FormArray가 많은 FormGroup을 구성원으로 사용하여 페이지가 응답하지 않음

this.priceListForm.addControl('priceListLines', this.formBuilder.array(this.priceListDetails.priceListLines.map(item => this.buildPriceListItem(item.listLinesId, item.prn, item.price, item.currencyCode, item.startDateActive, item.endDateActive)), dateConflictsValidator));

priceListDetails.priceListLines는 JSON 객체의 배열이며, 나는 그들이 buildPriceListItem를 사용 FormGroup들로 매핑하고있다.

buildPriceListItem(listLinesId, prn, price, currencyCode, startDateActive, endDateActive): FormGroup { 
return this.formBuilder.group({ 
    listLinesId: listLinesId, 
    prn: [prn, Validators.required], 
    price: [price, Validators.required], 
    currencyCode: [currencyCode, Validators.required], 
    startDateActive: [startDateActive, Validators.required], 
    endDateActive: [endDateActive, Validators.required] 
    }, { validator: startAndEndDateValidator }); 
}

당신이 볼 수 있듯이

, 나는 FormGroup 수준의 검증뿐만 아니라 FormArray 수준의 검증 있습니다.

JSON 전체 FormArray 각 생성 FormGroup 복잡한 검증을위한 FormArrayFormGroup의의 및 실행 검증에 객체의 '매핑'(대형의 ) 배열을 포함이 큰 프로세스는 브라우저가 응답하지 있습니다.

데이터 집합이 작은 경우 문제가 해결됩니다.

이 문제를 해결하려면 도와주세요.

출처

2017-11-28 karthikaruna

유효성 검사기를 사용 중지 해 보셨습니까? – c69

@ c69 유효성 검사기를 원합니다. 유효성 검사기를 제거하더라도 페이지가 응답하지 않는 시간은 줄어 듭니다. – karthikaruna

좋습니다 .. 유효성 검사기 없이도 페이지가 느리다면 총 요소 수는 얼마나됩니까? 내부 formGroup을 생성하는 데 사용하는 코드는 무엇입니까? 네가 보여준 사람은 무죄로 보인다. – c69

모든 데이터를 사용자에게 표시하거나 한꺼번에 처리해야하는 경우 : 데이터를 제한하고 청크로로드하십시오. 필터 (백 엔드/프론트 엔드)가있을 수 있습니다.

해결책이 충분하지 않거나 해결책이 충분하지 않은 경우이를 웹 근로자의 프로세스로 분리하여 UI가 반응하도록 처리 할 수 있습니다.

출처

2017-11-28 06:34:33

'Worker'는 일부 비즈니스 제약으로 인해 배열에 페이지 매김을하고 싶지 않기 때문에 제 해결책으로 보입니다. '각도'와 함께 근로자를 사용하는 것에 대한 통찰력? – karthikaruna

블로그 게시물을 읽은 후 제대로 작동하는 것 같습니다. https://blog.angularindepth.com/angular-with-web-workers-step-by-step-dc11d5872135 –

각도 : 동적으로 생성 된 FormArray가 많은 FormGroup을 구성원으로 사용하여 페이지가 응답하지 않음

답변

관련 문제