редактирование строк в списке

Question

У меня проблемы с редактированием строки в списке, созданном "ngFor".Строка состоит из другого списка сложных компонентов.Когда я нажимаю на элемент строки, я хочу перевести его в режим редактирования.

Я могу перевести его в режим редактирования, просто переключив флаг и создав «компоненты редактирования».Но проблема в том, что создание занимает много времени.

Чтобы проиллюстрировать это, я могу предоставить вам эти коды.

Первый подход: (Переключить компонент в режим редактирования)

list.component.html

<div *ngFor="row of rows">
   <my-row [row]="row" (click)="putRowIntoEditMode"></my-row>
</div>

myrow.component.html

<div *ngIf="row.editMode">
    <ngFor="prop of row.properties>
        <edit-component [config]="prop.config" [data]="prop.data"></edit-component>
</div>
<div *ngIf="!row.editMode" <!-- normal mode -->
    <normal-component *ngFor="row of row.properties"></normal-component>
</div>

Поэтому каждый раз, когда я нажимаю на строку, она должна быть переведена в режим редактирования.Я должен установить конфигурацию и данные для каждого редактирующего компонента в списке.Что занимает очень много времени, потому что список свойств может быть очень длинным.Обычный компонент отображает только значение, в то время как компонент edit более сложный.В нем содержится больше логики.

Так что мой другой подход заключается в том, чтобы всегда иметь «строку редактирования», один раз установить конфигурацию и переместить эту строку в указанный индекс в списке и, конечно, установить его.с новыми свойствами данных выбранной строки.Но я не знаю, как этого добиться.

Надеюсь, вы мне поможете.

С уважением

Answer 1

Может быть, вы пытаетесь добиться того, чтобы он больше не воссоздает каждую строку?

Если это так, добавьте

<div *ngFor="row of rows; trackBy: rowFn">
  <my-row [row]="row" (click)="putRowIntoEditMode"></my-row>
</div>

и в свой компонент

rowFn = index => index;

это связано с использованием trackBy в angular, теперь он пытается обновлять только те элементы, которые должны быть перерисованы ... без trackBy он должен заново визуализировать полный ngFor.

Надеюсь, это поможет