Angular2使用ngModel和ngFor内联编辑

Question

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

你可以在这里找到一个工作示例。

下面是我同时使用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

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

要解决这个问题，不要直接使用string。像这样将它们包装在一个类中:

export class Data {
  name: string;
}

那么你的数组声明将是:

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

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

修改后的plnkr: https://plnkr.co/edit/WwGcLlisjGe1cmZOMHhD?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>

Btw:您的ngFor语法只能用于<template>标签。如果在其他元素上使用，则必须使用上述语法。

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

Answer 3

应该在模板中修改。

<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