Question

  <div 
    class="transcript-snippet__content__body__sentance"
    [contentEditable]="true">
    <span *ngFor="let word of words; let i = index;"

      class="transcript-snippet__content__body__word">{{word.displayWord}}</span>
  </div>

使用上述模板，HTML生成为：

 <div _ngcontent-c18=""
  class="transcript-snippet__content__body__sentance ng-star-inserted"
  contenteditable="true">
  <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object",
  "ng-reflect-ng-for-track-by": "function (index, word) {\n     "
}-->
  <span _ngcontent-c18=""
    class="transcript-snippet__content__body__word ng-star-inserted"
    key="0">Hello </span>
  <span _ngcontent-c18=""
    class="transcript-snippet__content__body__word ng-star-inserted"
    key="1">World </span>
  <span _ngcontent-c18=""
    class="transcript-snippet__content__body__word ng-star-inserted"
    key="2">ContentEditable</span>
  <span _ngcontent-c18=""
    class="transcript-snippet__content__body__word ng-star-inserted"
    key="3">.</span>
</div>

如果我删除|剪切了“ Hello”中的第一个字符“ H”，则将被删除。以下所有模板逻辑将被阻止。有办法解决吗？我们可以防止破坏绑定吗？

Answer 1

在contentEditable元素中，如果我们尝试删除第一个'Span'元素，使用空格将第一个'Span'元素编辑或覆盖整个'Span'元素（例如粘贴），则标记可能是已删除。然后，Angular Logic破裂了。

删除“ contentEditable”元素中的第一个单词将破坏Angular 6 NgFor Binding

1 个答案: