DataScrollerのng-templateのPrimeNG内のデータが表示されない

Question

私はAngular 2アプリでPrimeNGモジュールを使用しています。 私はdataSrollerModuleを使用しましたが、データはヘッダの中に表示されますが、ng-templateの内部には表示されません。このエラーはthis.pages.length前に表示され プロパティに未定義の「データ」を読むことができません（しかし、私はデータを参照してください）：。 ERRORの例外TypeError：

また、私はこのエラーを持っています。

コンポーネント：

@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：

は、より良いuは事前にコードとTNXあり、ここで理解するために

<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

ますthis.pages.push（{data： 'test'}）の行で 'pages'配列にデータをプッシュする前にコード '{{pages [0] .data}}'がレンダリングされているため、エラーが発生します。 。プッシュする前にレンダリングが行われています。

コードページごとに= []; 。

- 最初の配列はそう[0]、したがって、未定義のエラーがあなたを与えるゼロインデックス・ページにアクセスすると、あなたはそれを動作させるためのコードで2つの補正を行う必要があり

「未定義の 『データ』プロパティを読み取ることができません」が空であります

まず、ngIfを適用してデータをページ配列で利用できるようになる前に、データスクロールレンダリングを行わないようにします。 2番目の方法はpushメソッドを使用してデータを配列にプッシュするのではなく、pushメソッドが変更検出サイクルをトリガーするのではなく、spreadメソッドを使用するからです。

<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> 

Coponent - -

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. 
    })