Angular 5 问题与 contenteditable 和 firefox 和 safari 中的输入答案

【问题标题】：Angular 5 issue with contenteditable and input in firefox and safariAngular 5 问题与 contenteditable 和 firefox 和 safari 中的输入
【发布时间】：2018-08-06 00:12:42
【问题描述】：

所以我正在创建一个包含内容可编辑单元格的表格，我需要同时更新视觉和打字稿代码，不幸的是我发现的所有替代方案都不起作用，这是一个具有相同问题的 plunker：

https://plnkr.co/edit/PCXNFSUqiHrYedx4E4mW?p=preview

import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div contenteditable='true'
         (input)='name=$event.target.innerText' 
         [(innerText)]='name'>
      name
    </div>
    <br>
    <div contenteditable='true'
         (input)='name=$event.target.innerHtml' 
         [(innerHtml)]='name'>
      name
    </div>
    <br>
    <div contenteditable='true'
         (input)='name=$event.target.textContent' 
         [(textContent)]='name'>
      name
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

它适用于 google chrome 和 opera，safari 和 mozilla 使用 textContent 和 innerText 将文本向后写入，并且使用 innerHtml 将值变为未定义。

@更新

对于我的问题，我最终在单元格内使用输入字段

<td [class.active]="selectedCell.row === rowIndex && selectedCell.colunm === 3"
          (click)="setSelectedCell(rowIndex, 3, true)"
          class="lassoer-info">
        <input [id]="'entity' + rowIndex"
               (keydown)="onkeyDown($event)"
               [(ngModel)]="rowData.entity"
               [disabled]="rowData.inscriptionId || !canEdit"
               type="text"
               class="input-field">
</td>

【问题讨论】：

它在 chrome 中也不起作用
抱歉，plunker 中有一个错误类型，但你是对的，innerHtml 和 innerText 在 chrome 上也不起作用，但 textContent 可以。
您的 plunker 在我的 Win10 笔记本电脑上的 Chrome 和 Firefox 中显示“Angular！v5.2.7”三次。
第一个带有innerHtml，第二个innerHtml和第三个textContent。
它们都是可编辑的。抱歉，我无法提供更好的服务，但我的个人生活真的很匆忙，因为这是我工作中的一个小问题，所以我优先考虑其他问题。

标签： html angular typescript firefox angular5

【解决方案1】：

我刚开始使用 Angular，但我想我可以发现一个错误。在 Javascript 中，它应该是 innerHTML 而不是 innerHtml（大写的 HTML）。

【讨论】：

在 webstorm ide 中，当我输入大写的 innerHTML 时，它说它是一个未解决的变量。如果我在输入内容可编辑单元格时使用它进行编译，它会在所有浏览器中向后输入。