Question

当我使用[innerhtml]绑定ngFor内的html数据时，可内容编辑的光标移回到开头。

<div *ngFor="article of articleLists">
  <div id="editor_article_{{article.id}}" contenteditable="true" [innerHtml]="article.data" class="form-control" autocomplete="off" placeholder="type your text here..."(input)="editableData($event.target.innerHTML, article.id, '')">
  </div>
</div>

但是，如果我在component中声明变量并绑定[innerhtml]，则contenteditable文本方向就可以了。但是问题在于变量应该动态地绑定到ngFor内。

Answer 1

您可能需要围绕问题提供更多背景信息：

当您与网页进行交互时，“内容可编辑的光标将移回开头” ？
您想确切地发生什么？

无论哪种方式，我都会对可能发生的事情进行一些猜测...。

某些事情可能导致数组articleLists的更新方式使得每个对象的引用都发生变化。这对Angular而言似乎是“新对象”，因为它通过对象的引用来跟踪对象。因此，Angular将重新渲染*ngFor循环的内容，并且插入符号的位置将丢失。

保留插入符号（或光标）位置的一种方法是防止Angular重新呈现*ngFor的内容（不需要时）。这可以通过使用trackBy函数更改Angular识别每个对象的方式来完成。

articleLists = [
  {
    id: 1,
    data: 'This is article 1',
  },
  {
    id: 2,
    data: 'This is article 2',
  },
  {
    id: 3,
    data: 'This is article 3',
  },
]

trackElement(index: number, element: any) {
  return element ? element.guid : null;
}

<div *ngFor="article of articleLists; trackBy: trackElement">
  <div id="editor_article_{{article.id}}" contenteditable="true" [innerHtml]="article.data" class="form-control" autocomplete="off" placeholder="type your text here..."(input)="editableData($event.target.innerHTML, article.id, '')">
  </div>
</div>

现在，如果列表中对对象的引用发生了变化，但ID保持不变，Angular将不重新呈现整个列表。

我是从here这篇文章中学到的。

可内容编辑的光标移回到ngfor循环的开头

1 个答案: