Angular：PrimeNG VirtualScroller：p-checkbox 在 ng-template 中未正确呈现（选中/未选中）答案

【问题标题】：Angular: PrimeNG VirtualScroller: p-checkbox is not rendering correctly (checked/unchecked) in the ng-templateAngular：PrimeNG VirtualScroller：p-checkbox 在 ng-template 中未正确呈现（选中/未选中）
【发布时间】：2020-08-25 05:17:49
【问题描述】：

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

下面是我的代码：

<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

提前谢谢你！

【问题讨论】：

标签： javascript angular primeng angular-cdk-virtual-scroll

【解决方案1】：

我认为这里的问题是您使用 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

【讨论】：