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并更新我的方法，但没有任何效果。

my-custom-component.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;
  }

ScrollerComponent.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函数追加元素。当前，它追加到数组，但不显示我的自定义元素。它应该显示自定义元素。我可能需要更新viewPort ...我没明白。

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

0 个答案: