Angular2 内联编辑使用​​ ngModel 和 ngFor

Question

我正在尝试在 Angular2 中使用 ngModel 实现内联编辑。我有一个需要使用 ngFor 迭代并且还使用 ngModel 的数组。当我尝试对此数组应用内联编辑时，我只能为数组的每个变量编辑一个字符。

您可以找到一个工作示例here。

这是我同时使用 ngModel 和 ngFor 的组件的代码：

import {Component} from '@angular/core'
import {InlineEditComponent} from './inline.component';
@Component({
  selector: 'inline-app',
  providers: [],
  template: `
    <div>
      <h2>Inline Editing with Angular 2</h2>
      <inline-edit [(ngModel)]="editableText" (onSave)="saveEditable($event)"></inline-edit>
    </div>
    <div>
      <ul style="margin:5px;">
      <li ngFor #arr [ngForOf]="array" [ngForTrackBy]="customTrackBy">
      <inline-edit [(ngModel)]="arr" (onSave)="saveEditable($event)"></inline-edit>
   </li>
        // <li style="margin:5px;" *ngFor="let arr of array ; let i=index">
        //   <inline-edit [(ngModel)]="array[i]" (onSave)="saveEditable($event)"></inline-edit>
        // </li>
      </ul>
    </div>
  `,
  directives: [InlineEditComponent]
})
export class InlineApp {
customTrackBy(index: number, obj: any): any {
    return index;
  }
  editableText = "Click to edit me!";
  // Save name to the server here.  
  saveEditable(value){
      console.log(value);
  }
  array=['bmw','benz','honda'];
}

如果有人可以帮助我，那就太好了。

Answer 1

这应该在模板中修改。

<ul>
            <li style="margin:5px;" *ngFor="let arr of array ; let i=index; trackBy:customTrackBy">
            <inline-edit [(ngModel)]="array[i]" (onSave)="saveEditable($event)"></inline-edit>
            </li>
</ul>

这个函数应该添加到类中：

export class{

customTrackBy(index: number): any {
    return index;
  }
}

最终工作代码：
https://plnkr.co/edit/7SSpZDec2N2zjrSUM04X?p=preview

Answer 2

您可以直接绑定到数组项而不是模板变量：

<li *ngFor="let arr of array; let idx=index; ngForTrackBy:customTrackBy">
      <inline-edit [(ngModel)]="array[i]" (onSave)="saveEditable($event)"></inline-edit>

顺便说一句：您的ngFor 语法只能用于<template> 标签。如果你在其他元素上使用它，上面使用的语法是必要的。

另见https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngFor

Answer 3

您正在编辑既是数组的不可变元素又是直接元素的字符串。这意味着每当字符串值发生变化时，都会创建一个新的字符串对象并替换数组中的旧字符串，这反过来又会导致 *ngFor 为该字符串重新启动新组件以替换旧字符串。如果将console.log('on-constructor') 放入InlineEditComponent 的构造函数中，您会看到每次添加字符时都会调用它。

要解决您的问题，请不要直接使用字符串。将它们包装在这样的类中：

export class Data {
  name: string;
}

那么你的数组声明将是：

array: Data[] = [
  {name:"bwm"},
  {name:"benz"},
  {name:"honda"}
];

这样，更改只会影响名称字段，包装对象仍然相同；因此 ngFor 不会被触发重新运行。

修改后的plnkr：https://plnkr.co/edit/WwGcLlisjGe1cmZOMHhD?p=preview