angular - 可编辑表 - 当原始值为空时，在 Angular 数据源中输入的值重复

Question

我正在尝试基于 Angular 中的基础数据源创建一个可编辑的表，但是当输入一个值时，输入的值会重复。（例如，当我输入 'a' 并离开元素时，它会自行更新为 'aa'）

这似乎仅在可编辑属性在初始化时未定义或显式为 null 时发生。

基于此文档的示例：Angular Editable Tables。

  export class HelloComponent implements OnInit {
  personList: Array<any> = [
    {
      id: 1,
      name: 'Aurelia Vega',
      prop: 'something that is not null'
    },
    {
      id: 2,
      name: 'Guerra Cortez',
      age: 45,
      prop: null
    }
  ];
  editProp: string;
  constructor() {}

  ngOnInit(): void {}

  updateProp(id: number, event: any) {
    const editProp = event.target.textContent;
    this.personList[id].prop = editProp;
  }
  changeProp(id: number, event: any) {
    this.editProp = event.target.textContent;
  }
}

模板：

<div class="card">
      <h3 class="card-header text-center font-weight-bold text-uppercase py-4">
        Editable table
      </h3>
      <div class="card-body">
        <div id="table" class="table-editable">
          <table
            class="table table-bordered table-responsive-md table-striped text-center"
          >
            <tr>
              <th class="text-center">Name</th>
              <th class="text-center">
                Prop
              </th>
            </tr>
            <tr *ngFor="let person of personList; let id = index">
              <td>
                <span>{{ person.name }}</span>
              </td>
              <td>
                <span
                  contenteditable="true"
                  (keyup)="changeProp(id, $event)"
                  (blur)="updateProp(id, $event)"
                  >{{ person.prop }}</span
                >
              </td>
            </tr>
          </table>
        </div>

        <div *ngFor="let p of personList">{{ p.name }}: {{ p.prop }}</div>
      </div>
    </div>

Stackblitz 在那个 stackblitz 中：尝试在空白表格单元格中输入任何值，您会看到重复项。如果您尝试覆盖第一行的 prop 值，它将按预期覆盖而不是重复。

标签： angularcontenteditable