2017-10-25 7 views
0

해답 : 문제가 rxJS 스레드에있었습니다. 한 스레드가 빈 배열을 너무 자주 전달하므로 테이블을 다시 설정했습니다.각도 4 cdk table trackby가 작동하지 않습니다. 전체 테이블이 다시 렌더링됩니다.

테이블은 4 초마다 업데이트됩니다. 깜박임을 멈추기 위해 trackBy 함수를 적용합니다. 함수가 트리거 된 것을 볼 수 있지만 전체 테이블 rerendered. 뭔가 잘못한 것 같아요. 내가하는 일 ... 추적 기능을 설정하십시오.

<mat-table ... [trackBy]="trackById"> 

추적 기능을 구현하십시오.

trackById(index, item) { 
    console.log(item._id); 
    return item._id; 
    } 

테이블의 데이터 소스 업데이트에 따라 테이블이 업데이트됩니다.

updateOperations() { 
    this.dataSource = new Source(this.forexService); 
    } 

전체 구성 요소는 여기 https://gist.github.com/vlikin/6f130c53b1fd38116afe20d15a2afc40입니다.

이 구성 요소는 작업 목록을 표시합니다. 두 개의 관측 값에서 데이터를 검색합니다. 테이블의 데이터 소스가 한 번 만들어집니다. 데이터 변경은 Behavior Subject 데이터에 의해 초기화됩니다. 데이터 반환 프로세스는 update 함수에서 찾습니다. mat-table 구성 요소는 출력을 최적화해야하는 지시문 인 trackBy를 사용합니다. 하지만 여전히 깜박입니다. - https://embed.plnkr.co/wK5Jh4tIgY9p9Gw4rfhx/ 없이 - 와 https://embed.plnkr.co/Rc9z9aXlalQe8yWpGjUq/

전혀 그런 효과가 없습니다 :

가와 trackId없이 두 plunks있다. 내 응용 프로그램에서 그것은 깜박입니다.

누구든지 나를 도울 수 있기를 바랍니다. 문안 인사.

+0

항목 // 또는 index 및 * ngFor "..... trackBy : trackById"만 반환하면됩니다. ngFor를 사용하지 않는 경우 더 많은 코드를 게시하십시오 – Vega

+0

전체 구성 요소는 https://gist.github.com/vlikin/6f130c53b1fd38116afe20d15a2afc40입니다. 이 구성 요소는 작업 목록을 표시합니다. 두 개의 관측 값에서 데이터를 검색합니다. 테이블의 데이터 소스가 한 번 만들어집니다. 데이터 변경은 Behavior Subject 데이터에 의해 초기화됩니다. 데이터 반환 프로세스는'update' 함수에서 찾습니다. mat-table 구성 요소는 출력을 최적화해야하는 지시문 인 trackBy를 사용합니다. 하지만 여전히 깜박입니다. –

+0

Mat-table에는 trackby 속성이 없습니다. (적어도 관련있는 항목을 찾을 수있었습니다) trackById 메소드에서 console.log를 설정하면 예제가 (있는 경우) 실행되지 않습니다. , 그것은 내 생각에 그것이 속성이 아니라는 생각을하게 해준다. – Vega

답변

0

이것은 논리적 인 문제였습니다. DataSource는 몇 개의 스트림에서 결합되었습니다. 따라서 스트림 중 하나가 데이터를 재설정했습니다.