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>

因此，每次我单击一行时，都应将其置于编辑模式。我必须为列表中的每个编辑组件设置配置和数据。这需要花费很长时间，因为属性列表可能会很长。普通组件仅显示值，而编辑组件则更复杂。它包含更多逻辑。

因此，我的另一种方法是始终拥有一个“编辑行”，对其进行一次配置，然后将该行移动到列表中的指定索引，当然还要使用选定行的新数据属性对其进行设置。但是我不知道如何实现。

希望你能帮助我。

最诚挚的问候

Answer 1

也许您要实现的目标是不再重新创建每一行？

如果是，请添加

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

以及您的组件中

rowFn = index => index;

这是由于在角度中使用了trackBy，它现在仅尝试更新那些必须重新渲染的元素。.而没有trackBy，它必须重新渲染完整的ngFor。

希望这会有所帮助

列表内的行编辑

1 个答案: