Question

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

您可以找到一个有效的例子here。

以下是我正在使用ngModel和ngFor的组件的代码：

var titles_0 = JSON.parse(JSON.stringify(titles));
var messageData = {
    attachment: {
        type: "template",
        payload: {
            template_type: "generic", 
            elements: titles_0
        } 
    }
}

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

Answer 1

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

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

export class Data {
  name: string;
}

然后您的数组声明将是：

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

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

修改过的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>

顺便说一句：您的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

Angular2使用ngModel和ngFor进行内联编辑

3 个答案: