1

我正在尝试在 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'];
}

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

4

3 回答 3

2

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

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

export class Data {
  name: string;
}

那么你的数组声明将是：

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

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

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

于 2016-07-06T01:42:02.840 回答
0

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

<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

于 2016-07-06T05:00:35.203 回答
0

这应该在模板中进行修改。

<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

于 2016-07-06T19:00:30.917 回答