p-virtualScroller error

[lenpino]

I'm trying to migrate my code from p-dataScroller to p-virtualScroller but I'm getting this error:

ERROR TypeError: Cannot read property 'nativeElement' of undefined
at CdkVirtualScrollViewport.push../node_modules/@angular/cdk/__ivy_ngcc__/esm5/scrolling.es5.js.CdkVirtualScrollViewport._doChangeDetection (scrolling.es5.js:1474)

My code went from:
<p-tabPanel header="Evals." leftIcon="fa fa-thumbs-o-up" *ngIf="!emptyObs">
<p-scrollPanel [style]="{width: '100%', height: '500px'}">
<div class="item">
<p-dataScroller [value]="observaciones" [rows]="10" [lazy]="true" (onLazyLoad)="cargaEvaluaciones($event)" [totalRecords]="producto?.numEvals">
<ng-template let-obs pTemplate="item" let-i="index">
<div>
<div class="fb-rating-review__content">
<div class="d-flex justify-content-between">
<div class="d-flex">
<p-rating ngModel="{{obs.valorEvaluacion}}" [cancel]="false" [readonly]="true" [iconOnStyle]="{'color':'#22673B'}" [iconOffStyle]="{'color':'#22673B'}"></p-rating>
<span class="pl-2" style="font-size: 13px; padding-top: 2px;">({{obs.valorEvaluacion}}/5)</span>
</div>
<p class="fb-rating-review__date">{{formatDate(obs.fechaevaluacion)}}</p>
</div>
<p>Por {{obs.usuario.nombre}}</p>
<p>{{obs.textoEvaluacion}}</p>
</div>
</div>
<hr>
</ng-template>
</p-dataScroller>
</div>
</p-scrollPanel>
</p-tabPanel>



To:

<p-tabPanel header="Evals." leftIcon="fa fa-thumbs-o-up" *ngIf="!emptyObs">
<p-scrollPanel [style]="{width: '100%', height: '500px'}">
<div class="item">
<p-virtualScroller [value]="observaciones" [rows]="10" scrollHeight="500px" [itemSize]="85" [cache]="false" [lazy]="true" (onLazyLoad)="cargaEvaluaciones($event)" [totalRecords]="producto?.numEvals">
<ng-template let-obs pTemplate="item" let-i="index">
<div>
<div class="fb-rating-review__content">
<div class="d-flex justify-content-between">
<div class="d-flex">
<p-rating ngModel="{{obs.valorEvaluacion}}" [cancel]="false" [readonly]="true" [iconOnStyle]="{'color':'#22673B'}" [iconOffStyle]="{'color':'#22673B'}"></p-rating>
<span class="pl-2" style="font-size: 13px; padding-top: 2px;">({{obs.valorEvaluacion}}/5)</span>
</div>
<p class="fb-rating-review__date">{{formatDate(obs.fechaevaluacion)}}</p>
</div>
<p>Por {{obs.usuario.nombre}}</p>
<p>{{obs.textoEvaluacion}}</p>
</div>
</div>
<hr>
</ng-template>
</p-virtualScroller>
</div>
</p-scrollPanel>
</p-tabPanel>


I need some help, please. This happens when the tab is shown after the user creates the first evaluation.

Thanks