1

我正在尝试实现PrimeNG VirtualScroller组件来处理大型数据列表。问题是，当我在模板内放置一个绑定到 [(ngModel)] 上的列表的p-checkbox时，选中复选框，然后滚动列表以加载下一个值，一些下一个值显示已选中也一样，但它们根本没有被点击......

下面是我的代码：

<p-virtualScroller [value]="filtered" scrollHeight="77px" [itemSize]="30" rows="50">
              <ng-template pTemplate="item" let-option>
                
                <p-checkbox [(ngModel)]="selectedValues" (click)="onUserCheckboxClick()" name="selectedValues"
                  label="{{(option.customLabel ? option.customLabel : option.label)}}" value="{{option.value}}"
                   labelStyleClass="username-checkbox-label">
                </p-checkbox>

              </ng-template>
              
</p-virtualScroller>

你们有没有遇到过使用 PrimeNG 的 VirtualScroller 的情况？

我相信这确实是 PrimeNG 组件的问题，但也许我在这里做错了......

这是文档的网址：

https://www.primefaces.org/primeng/v9.1.4-lts/#/virtualscroller

先感谢您！

4

1 回答 1

0

我认为这里的问题是您将 selectedValues 用作所有复选框的 ngModel，因此所有复选框都具有相同的模型。例如，如果选项具有 bool 属性，则可以解决此问题。所以最后，你会得到这样的东西：

<p-checkbox [(ngModel)]="option.checked" (click)="onUserCheckboxClick()" name="selectedValues"
              label="{{(option.customLabel ? option.customLabel : option.label)}}" value="{{option.value}}"
               labelStyleClass="username-checkbox-label">
</p-checkbox>

您可以查看我根据主要文档制作的示例，您可以在其中看到每个复选框独立工作：https ://primeng-virtualscroller-demo-ssaw8h.stackblitz.io

于 2020-08-24T21:17:49.637 回答