Блог

Я пытаюсь реализовать компонент 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, но, возможно, я здесь делаю что-то не так…

здесь это URL-адрес документации:

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

заранее благодарю вас!

Я думаю, что проблема здесь в том, что вы используете 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>
  

Вы можете проверить этот пример, который я сделал на основе документов prime, где вы можете увидеть, что каждый флажок работает независимо:https://primeng-virtualscroller-demo-ssaw8h.stackblitz.io