奇怪的 Angular2 模型绑定问题

Question

我运行进入了一个地方，Angular2 上的模型绑定没有像我预期的那样绑定，而且我无法确定我哪里出错了。

我有一个对象数组如下：

commands = [
    {
        "id": 2,
        "command": "!first",
        "action": "This is the first command. You found it!",
        "reply": false
    },
    {
       "id": 5,
        "command": "!hi",
        "action": "Hello, how are you today?",
        "reply": true
    },
    ...
];

视图模板如下（为简洁起见，仅显示具有相关 Angular2 信息的标签）：

<form #commandForm="ngForm">
    <tr *ngFor="#cmd of commands">
        <td *ngIf=" ! isEditingCommand(cmd)">{{ cmd.command }}</td>
        <td *ngIf="isEditingCommand(cmd)">
            <input type="text" class="form-control" placeholder="!command" required [(ngModel)]="cmd.command" (ngModelChange)="cmd.command=cleanCommand($event)" ngControl="cmd" #cmd="ngForm">
        </td>
        <td *ngIf=" ! isEditingCommand(cmd)">{{ cmd.action }}</td>
        <td *ngIf="isEditingCommand(cmd)">
            <textarea class="form-control" rows="1" placeholder="Text to display." required [(ngModel)]="cmd.action" ngControl="action" #action="ngForm"></textarea>
        </td>
    </tr>
</form>

当isEditingCommand(cmd) === false时，行显示如下：

当isEditingCommand(cmd) === true时，这是我得到的：

我已经将cmd和cmd.command都改成了各种名字，以防command是Angular2的保留字，但无济于事。当我将 {{ cmd | json }} 放入视图中时，我收到此异常：

EXCEPTION: TypeError: Converting circular structure to JSON in [
                {{ cmd | json }}
             in CommandComponent@24:199]

不幸的是，我无法确定这怎么会有圆形结构。即使通过 Chrome Inspector，我也没有找到可能是圆形的地方。

为了提供帮助，这里是视图中定义的函数（TypeScript 给我带来了问题；我稍后会重构它）：

CommandComponent.prototype.cleanCommand = function (value) {
    value = value.replace(/[^a-z]+/gi, '');
    if (0 >= value.indexOf('!') && '!' !== value.substr(0, 1)) {
        value = '!' + value;
    }

    return value;
};
CommandComponent.prototype.isEditingCommand = function (command) {
    if (null === this.currentCommand) {
        return false;
    }

    return this.editFormActive && this.currentCommand.id === command.id;
};
// These are not used by the template shown, but they set values used in the functions.
CommandComponent.prototype.editCommand = function (command) {
    this.editFormActive = true;
    this.currentCommand = command;
};
CommandComponent.prototype.cancelEditCommand = function () {
    this.editFormActive = false;
    this.currentCommand = null;
};

环境：

Angular 2.0.0-beta.13
RxJS 5.0.0-beta.2
Zone.js 0.6.8

我做错了什么？如果需要更多信息，请告诉我，谢谢！

Answer 1

我不确定我是否正确理解了您的问题。但是，我只看到一个可能导致绑定问题的问题。

这一行：

<input type="text" class="form-control" placeholder="!command" required [(ngModel)]="cmd.command" (ngModelChange)="cmd.command=cleanCommand($event)" ngControl="cmd" #cmd="ngForm">

您重新定义了局部变量 cmd。第一个，在*ngFor="#cmd of commands"。另一个#cmd="ngForm"。因此，到 cmd.command 的绑定将是 cmd 和 ngForm 而不是 #cmd of commands。换句话说，你已经添加了一个新的属性 command 到 ngForm.

这将解释循环引用问题，因为 ngForm 的类型 NgFormName 具有 _parent 引用。

奇怪的 Angular2 模型绑定问题

Weird Angular2 Model Binding Issue

angular2-forms

angular