Угловая виртуальная прокрутка не перерисовывает список при добавлении/удалении элемента списка

На данный момент это часть моего проекта. Если щелкнуть элемент списка, его видимость изменится. Многие списки, кажется, хорошо отображаются с использованием виртуальной прокрутки угла, но возникает проблема, когда большое количество элементов в списке удаляется. Виртуальный свиток не обновляется, оставляя свободное место посередине. Обновление области просмотра требуется всякий раз, когда элемент добавляется или удаляется. Данные списка, которые я использую, не являются наблюдаемыми данными. Подскажите пожалуйста как решить проблему.

https://stackblitz.com/edit/angular-ivy-o9dhar?file=src%2Flist%2Flist.component.html

моя проблема

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
0
59
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам придется обновить исходный код, чтобы он заработал. проблема с переключателем заключается в том, что вам нужно будет заменить его чем-то аналогичной высоты. У них уже давно есть динамическая высота в эксперименте на угловом cdk. Но для удаления вы можете сделать что-то простое. Ключевая часть - просто обновить источник, чтобы он мог перерисовать список.

export class ListComponent {
  @Input()
  ListData: any[];
  remove(element) {
    this.ListData = this.ListData.filter((x) => x != element);
  }
}

вещь

export class ListItemComponent {
  @Input()
  element;

  @Output('remove')
  onListItemClicked = new EventEmitter();

  toggleVisibility() {
    this.onListItemClicked.emit(this.element);
  }
}

list.component.html

<cdk-virtual-scroll-viewport class="list-container" itemSize="30">
  <div *cdkVirtualFor="let data of ListData">
    <list-item [element]="data" (remove)="remove($event)"></list-item>
  </div>
</cdk-virtual-scroll-viewport>

https://stackblitz.com/edit/angular-ivy-tntnpm?file=src%2Flist%2Flist.component.ts

Из комментария: Добавление нового объекта здесь — простой способ, основанный на вашей ссылке stackblitz.

const newItem = {
     id: Number(this.input.nativeElement.value) + 1,
     title: `item ${Number(this.input.nativeElement.value) + 1}`,
     isShow: true,
};
this.favoriteList = [newItem,...this.favoriteList] // instead of splice

действительно спасибо, но у меня есть другая проблема... когда я добавил новый элемент в избранное, я поместил новый элемент в начало списка избранных. но нет никаких изменений в списке визуализированного вида. как я могу изменить вид при добавлении нового элемента? stackblitz.com/edit/angular-cdk-scroll-bug-vifffd?file=src/a‌​pp/…

tjdwlshwp 24.04.2022 11:19

отредактировал пост как добавить. Тот же принцип по-прежнему применяется

Henrik Bøgelund Lavstsen 24.04.2022 14:23

Другие вопросы по теме