javascript - 当数组更改时，Contenteditable DOM 更新不正确。 Angular

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 的自定义方式。