* ngFor 성능이 너무 느립니다.

데이터 배열에 'data_list'데이터가 있고 첫 번째 데이터에서 키를 검색하는 두 번째 배열이 있습니다. 내 문제는 data_list에 각 행에 대해 1900 개의 행과 20 개의 입력란이 있다는 것입니다. , 성능이 너무 느려지고 약 20 초 후에 페이지가로드됩니다.* ngFor 성능이 너무 느립니다.

어떻게이 테이블의 성능을 향상시킬 수 있습니까? 이것은 가정된다

return this._http.get(link) 
         .map((res:Response) => res.json()) // ...and calling .json() on the response to return data 
         .catch((error:any) => Observable.throw(error.json().error || 'Server error'));

출처

2017-09-17 tyehia

당신은 약속이나 관찰 사항을 사용하고 있습니까? typescript 코드로 게시물을 업데이트하십시오. – Aravind

@Aravind 나는 관측 자료를 사용하고 있습니다. – tyehia

저는 사람들이 이런 질문을 할 때 종종 궁금해합니다. 웹 페이지에서 1900 행의 데이터를 렌더링해야 할 필요가있을 가능성이 있습니까? 사용자가 이와 같은 모든 데이터 라인을 읽지는 않을 것입니다. 대신 인쇄 할 것으로 예상되는 보고서로 생성하는 경우이 작업에 더 적합한보고 엔진이 있습니다. – Claies

<tbody> 
      <tr *ngFor="let data of data_list;let last = last;let i = index;" #FireJQuery> 

        <td class="width-percent-1 sorting_1" tabindex="0"></td> 
        <td *ngFor="let col of Descriptive_FieldsMap;let i = index;"> 

        <div > 
         {{data[col.DBName] || 'N/A'}} 
        </div> 
       </td> 
       </tr> 
     </tbody>

TS 코드

this._bondServices.getBonds(this._localStorageService.get('userID').toString(), this.rulebookID, this._localStorageService.get('Project').toString()) 

         .subscribe(
          data_list => 
          { 
           this.data_list = data_list; 


          }, //Bind to view 
          err => { 
           // Log errors if any 
           console.log(err); 
          }, 
          () => {if(this.data_list) window.dispatchEvent(new CustomEvent('bonds-ready'));});

}

Services.ts 코드는 코멘트 할 수 있지만, 내 응용 프로그램은 밀리 초 단위로 1400 개 항목을로드 할 수 있지만 전자 제품을 찾고 있습니다. 각 페이지에는 40 개의 항목과 총 36 개의 페이지가 있습니다. 아래 그림을 참조하십시오.

출처

2017-09-17 03:39:17

* ngFor 성능이 너무 느립니다.

답변

관련 문제