angular-cdk

问题 I have a table displays so many rows, I want to optimize the performance of it. I've found a solution by using Virtual Scroll technique. Here is an example of Angular Material CDK Vritual Scroll Viewport Component with a simple div I've found: <cdk-virtual-scroll-viewport class="list-container lg" [itemSize]="52.5"> <div *cdkVirtualFor="let state of statesObservable | async;" class="list-group-item"> <div class="state">{{state.name}}</div> <div class="capital">{{state.capital}}</div> </div> <

问题 I have a table displays so many rows, I want to optimize the performance of it. I've found a solution by using Virtual Scroll technique. Here is an example of Angular Material CDK Vritual Scroll Viewport Component with a simple div I've found: <cdk-virtual-scroll-viewport class="list-container lg" [itemSize]="52.5"> <div *cdkVirtualFor="let state of statesObservable | async;" class="list-group-item"> <div class="state">{{state.name}}</div> <div class="capital">{{state.capital}}</div> </div> <

问题 I have a table displays so many rows, I want to optimize the performance of it. I've found a solution by using Virtual Scroll technique. Here is an example of Angular Material CDK Vritual Scroll Viewport Component with a simple div I've found: <cdk-virtual-scroll-viewport class="list-container lg" [itemSize]="52.5"> <div *cdkVirtualFor="let state of statesObservable | async;" class="list-group-item"> <div class="state">{{state.name}}</div> <div class="capital">{{state.capital}}</div> </div> <

问题 I'm working on big data tables and I need to have oportunity to set dynamic if I want to use virtual scroll or standard solution. On my prototype I used *ngIf and duplicated views for standard body and cdk virtual scroll vierport. Is there any possibilty to just disable virtual scroll, without building additional components for alternate views? Thanks in advance! 回答1: I believe you are asking for adding the virtual scroll directive based on a condition. In that case, it cannot be done at the

问题 I'm working on big data tables and I need to have oportunity to set dynamic if I want to use virtual scroll or standard solution. On my prototype I used *ngIf and duplicated views for standard body and cdk virtual scroll vierport. Is there any possibilty to just disable virtual scroll, without building additional components for alternate views? Thanks in advance! 回答1: I believe you are asking for adding the virtual scroll directive based on a condition. In that case, it cannot be done at the

问题 Prerequisite: cdk draggable elements inside a nested scrollable div (see the example https://stackblitz.com/edit/angular-7y19nm?file=app/cdk-drag-drop-sorting-example.html) How to reproduce: Start dragging an item -> scroll the page -> drag item a bit more when not scrolling Effect: item placeholder stays in wrong place and it's basically impossible to drag item anywhere outside the viewport. <div style="height: 100vh; overflow-y: auto"> <div cdkDropList class="example-list"

问题 Prerequisite: cdk draggable elements inside a nested scrollable div (see the example https://stackblitz.com/edit/angular-7y19nm?file=app/cdk-drag-drop-sorting-example.html) How to reproduce: Start dragging an item -> scroll the page -> drag item a bit more when not scrolling Effect: item placeholder stays in wrong place and it's basically impossible to drag item anywhere outside the viewport. <div style="height: 100vh; overflow-y: auto"> <div cdkDropList class="example-list"

问题 Prerequisite: cdk draggable elements inside a nested scrollable div (see the example https://stackblitz.com/edit/angular-7y19nm?file=app/cdk-drag-drop-sorting-example.html) How to reproduce: Start dragging an item -> scroll the page -> drag item a bit more when not scrolling Effect: item placeholder stays in wrong place and it's basically impossible to drag item anywhere outside the viewport. <div style="height: 100vh; overflow-y: auto"> <div cdkDropList class="example-list"

问题 So I want to make my version of the Battleships game in Angular and to do that I need a 10x10 matrix in which I can drag and drop the ships ( if you played the game you know what I am talking about ) and I'm using the Angular Cdk but I cannot make it work at all. What I have tried so far is make a table out of divs, ships elements aside and drag and drop them on the board but I can't connect the two arrays because the array of ships is not nested and the board is. Edit: Here is the link to

问题 So I want to make my version of the Battleships game in Angular and to do that I need a 10x10 matrix in which I can drag and drop the ships ( if you played the game you know what I am talking about ) and I'm using the Angular Cdk but I cannot make it work at all. What I have tried so far is make a table out of divs, ships elements aside and drag and drop them on the board but I can't connect the two arrays because the array of ships is not nested and the board is. Edit: Here is the link to