NGRX Angular - Избегайте перезагрузки компонента при редактировании состояния
У меня проблема с компонентом. Я управляю приложением со списком задач. У меня есть наблюдаемый массив, который я использую в оболочке с асинхронным конвейером, и дочерний компонент «компонент Todo», который в качестве входных данных называется «Todo», и атрибут «showDetails», который является логическим значением, используемым для переключения пользовательского интерфейса и инициализируемым как false. Это структура:
<div *ngFor = "let todo of todo$">
<app-todo [todo] = "todo"></app-todo>
</div>
Внутри шаблона todo-component у меня есть кнопка, с помощью которой я переключаю логическое значение. Также есть функция «toggle», которая отправляет действие, обновляющее состояние ngrx задачи. Когда я отправляю действие, и редуктор обновляет состояние, компонент полностью перезагружается, а также, если для параметра showDetails установлено значение true, он возвращается в значение false, поскольку компонент перезагружается.
Это функция редуктора, которая обновляет состояние
on(Toggle, (state, action) =>
state.map(i => (i.id === action.id ? { ...i, todo: !i.todo } : i))
)
Это пример на stackblitz: Демо
Я бы хотел, чтобы мое значение showDetails оставалось таким же и с изменением состояния ...
Ответы 1
причина в том, что вы не предоставляете функцию trackBy для ngFor. И, как результат, каждый раз, когда массив обновляется, ngFor создает новые представления и уничтожает старые. чтобы исправить это, предоставив trackByFn, чтобы ngFor знал, какой элемент обновляется.
// app.component.ts
trackById(idx, {id}) {
return id;
}
<div *ngFor = "let todo of todos$ | async; trackBy: trackById" ...