无法在 PrimeNG 的 dataScroller ng-template 中看到数据

Question

我在 Angular 2 应用程序中使用 PrimeNG 模块。我使用了 dataSrollerModule，数据显示在 header 内部，但不显示在 ng-template.

内部

我也有这个错误： ERROR TypeError: Cannot read 属性 'data' of undefined.(但我看到了数据) 此错误显示在 this.pages.length.

之前

为了更好地理解这里你是代码和tnx提前:

组件：

 @Component({
  selector: 'view-batch',
 templateUrl: './view-batch.component.html'
})
 export class ViewBatchComponent implements OnInit {

@Output()
onDocumentSelected = new EventEmitter<any>();
load: boolean;
pages =[];

constructor(
private errorService: ErrorService,
private batchService: BatchService,
) { }

ngOnInit() {
this.batchService.getPageStreamById(8653).subscribe(pageStream => {
  if(this.pages){
   this.pages = []; 
         }
  this.pages.push({data:'test'});
  console.log("this.pages.length :" + this.pages.length)// It displays 1
})

}

Html :

<p-dataScroller [value]="pages" [rows]="10" [inline]="true">
   <p-header>{{pages[0].data}}</p-header> // here I see data but in the 
     //console notify me that at this line it cant read property  'data' of 
     //undefined

  <ng-template let-page pTemplate="item">
    <span>{{pages[0].data}}</span>// nothing
    <span>{{page.data}}</span>//nothing
 </ng-template>

Answer 1

您遇到错误是因为代码“{{pages[0].data}}”在您将数据推入 'pages' 数组第 this.pages.push 行之前呈现（{data:'test'}); .渲染在推送之前发生。

根据代码页 =[]; .最初数组是空的，所以访问零索引页 [0] 会给你未定义的错误 '无法读取属性 'data' of undefined'

您需要在代码中进行两次更正才能使其正常工作 -

第一个是通过应用 ngIf 在页面数组中的数据可用之前不要让数据滚动器呈现。其次是不要使用 push 方法将数据推送到数组中，因为 push 不会触发变化检测周期，而是使用 spread 方法。

这是代码

Html -

<p-dataScroller  *ngIf ='scrollerDataLoaded'   // won't render until data is available
                 [value]="pages" 
                 [rows]="10" [inline]="true">
    <p-header>{{pages[0].data}}</p-header> // if html render before data is loaded then for an empty array pages[0] is undefined.
    <ng-template let-page pTemplate="item">
       <span>{{pages[0].data}}</span>// nothing
       <span>{{page.data}}</span>//nothing
    </ng-template>

组件 -

scrollerDataLoaded : boolean = false;
ngOnInit() {
   this.batchService.getPageStreamById(8653).subscribe(pageStream => {
     if(this.pages){
        this.pages = []; 
     }
     //this.pages.push({data:'test'}); don't use push
     this.pages = [...this.pages, {data:'test'}]; // use spread operator to push data. this will trigger change detection.
     console.log("this.pages.length :" + this.pages.length)
     this.scrollerDataLoaded =true; // html will render after setting this to true and pages array will have data as well.
   })

无法在 PrimeNG 的 dataScroller ng-template 中看到数据

Can't see the data inside a dataScroller's ng-template of PrimeNG

angular2-template

primeng