gridview - 我在 mat-grid-list 上添加滚动条，它连续显示 5 列。虚拟滚动条未在滚动条上加载数据

Question

我在垫子网格列表上添加了虚拟滚动条，如下所示

 <virtual-scroller #scroll [items]="tiles" (vsEnd)="onVsEnd($event)" 
      flex="100" style="width:80vw" bufferAmount="10">
       <mat-grid-list #grid rowHeight="205px" gutterSize="10px" >
            <mat-grid-tile colspan="1" rowspan="1" *ngFor="let tile of scroll.viewPortItems">
                <my-custom-component [testValue]="tile.value"></my-custom-component>
              </mat-grid-tile>
          </mat-grid-list>      
      </virtual-scroller>

虽然我已经指定了 bufferAmount 但它不会加载缓冲的项目并且在结束时它不会使用我的自定义组件加载新项目。我的意思是我无法在 mat-grid-list 中看到我的客户组件呈现。我需要在我的 ngFor 中更新 scroll.viewPortItems 吗？？？

事件vsEnd的实现如下

onVsEnd(event) {
if((event.endIndex+10) >= (this.tiles.length-1)){
//push new row with 5 elements
         console.log("need to add , end is  " + event.endIndex ); 
         this.tiles.push({value : "elem " + (this.tiles.length + 1)})
         this.tiles.push({value : "elem " + (this.tiles.length + 2)})
         this.tiles.push({value : "elem " + (this.tiles.length + 3)})
         this.tiles.push({value : "elem " + (this.tiles.length + 4)})
         this.tiles.push({value : "elem " + (this.tiles.length + 5)})
          this.tiles = this.tiles.slice();
        }
}

我想首先它应该显示缓冲区以外的所有项目。如果缓冲区完成，则按照我的方法添加更多行。

任何帮助表示赞赏。

我尝试删除 bufferAmount 并更新我的方法，但没有任何效果。

我的自定义组件.html

<mat-card flex style="width:250px;height:206px"> 
<div layout-gt-sm="column" layout-align="start stretch" flex>
    <div style="height:0.3em" flex></div>
    <mat-progress-bar class="top-bar" mode="determinate" value="50" bufferValue="100"></mat-progress-bar>
</div>
</mat-card>

ScrollerComponent.html.ts

 <virtual-scroller #scroll [items]="tiles" (vsEnd)="onVsEnd($event)" 
  flex="100" style="width:80vw" bufferAmount="10">
   <mat-grid-list #grid rowHeight="205px" gutterSize="10px" >
        <mat-grid-tile colspan="1" rowspan="1" *ngFor="let tile of scroll.viewPortItems">
            <my-custom-component [testValue]="tile.value"></my-custom-component>
          </mat-grid-tile>
      </mat-grid-list>      
</virtual-scroller>

ScrollerComponent.scss

   virtual-scroller {
   display: block;
   width: 100%;
   height: 430px;
  }

滚动组件.ts

 export class ScrollerComponent { 

tiles :any[] = [ {"value":1},{"value":2},{"value":3},{"value":4},{"value":5},{"value":6},{"value":7},{"value":8},{"value":9},{"value":10},{"value":11},{"value":12},{"value":13},{"value":14},{"value":15},{"value":16},{"value":17},{"value":18},{"value":19},{"value":20},{"value":21},{"value":22},{"value":23},{"value":24},{"value":25},{"value":26},{"value":27},{"value":28},{"value":29},{"value":30},{"value":31}];

onVsEnd(event) {
if((event.endIndex+10) >= (this.tiles.length-1)){
//push new row with 5 elements
     console.log("need to add , end is  " + event.endIndex ); 
     this.tiles.push({value : "elem " + (this.tiles.length + 1)})
     this.tiles.push({value : "elem " + (this.tiles.length + 2)})
     this.tiles.push({value : "elem " + (this.tiles.length + 3)})
     this.tiles.push({value : "elem " + (this.tiles.length + 4)})
     this.tiles.push({value : "elem " + (this.tiles.length + 5)})
      this.tiles = this.tiles.slice();
    }
 }

}

预期输出：

在向下滚动时，首先加载超过缓冲的元素，然后根据 onVsEnd 函数附加元素。目前它附加到数组但不显示我的自定义元素。它应该显示自定义元素。我可能需要更新视口......我没有得到它。

标签： gridviewangular-materialangular7virtualscroll