Question

我创建了Plunker。

代码在这里：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="changeArrayToOne()">ChangeOne</button>
      <button (click)="changeArrayToTwo()">ChangeTwo</button>
      <table>
        <tr>
            <td *ngFor="let c0 of array" contenteditable='true'>
                {{c0}}
            </td>
        </tr>
      </table>
    </div>
  `,
})
 export class App {
  name:string;
  initial = [];
  one = [];
  two = [];
  array = [];
  constructor() {
    this.initial = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
    this.one = [4,4,4,0,0,0,0,0,0,0,0,0,0,0,0,0];
    this.two = [4,4,4,5,0,0,0,0,0,0,0,0,0,0,0,0];
    this.array = this.initial.slice();
  }

  changeArrayToOne() {
    this.array = this.one.slice();
  }

  changeArrayToTwo() {
    this.array = this.two.slice();
  }
}

`

我正在尝试创建由ngFor数组填充的可编辑表。我使用contenteditable='true'属性。

表格中填充了this.array变量。我还有两个按钮ChangeOne和ChangeTwo，它们将this.array的所有值替换为数组this.one和this.two中的值。

所以，这是重现问题的步骤：

运行plunker（表格填充了this.initial的值数组）。
表格行中的第一个元素是0。将其更改为10（请记住，表格可编辑）。
按下按钮ChangeOne。它会将this.array中的this.initial值替换为this.one。

如您所见，前三个元素已替换为4，10已移至第四个位置。如果您再次按ChangeTwo或ChangeOne，10将向右移动。

为什么？！又如何修复？我更换数组后，我不希望10出现。

Answer 1

这是一个 Plunker 来展示它的工作原理。要使用的代码是：

customTrackBy(index, item) {
  return index + '-' + item;
}

HTML：

*ngFor="let c0 of array; trackBy: customTrackBy"

由于数组由原始值组成，因此您必须告诉Angular如何检查更改。由于值更改，您必须返回该项，如果您对索引有问题，则还必须返回索引。

将此视为为阵列创建ID的自定义方式。

数组更改时，Contenteditable DOM更新错误。角

1 个答案: