Я добавляю скроллер поверх mat-grid-list, который отображает 5 столбцов подряд. виртуальный скроллер не загружает данные на скроллер - PullRequest
Новая
       21

Я добавляю скроллер поверх mat-grid-list, который отображает 5 столбцов подряд. виртуальный скроллер не загружает данные на скроллер

0 голосов
/ 05 января 2019

Я добавил виртуальный скроллер поверх списка матов, как показано ниже 

 <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, но он не загружает буферизованные элементы, и по окончании он не загружает новый элемент с моим пользовательским компонентом. , Нужно ли обновлять scroll.viewPortItems в моем ngFor ???

реализация события 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 и обновить мой метод, но ничего не помогло.

мой обычай-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 ... Я не получаю его.

...