Weird Angular2 Binding Issue

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, я не нахожу места, где он может быть круговым.

Чтобы помочь, вот функции, которые определены в представлении (машинопись дает мне проблемы, я буду реорганизовать в него позже):

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; 
}; 

Окружающая среда:

• Угловой 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 будет равна cmdngForm, а не #cmd of commands. Другими словами, вы добавили новое свойство command в ngForm.

Это объясняет круговую справочную проблему, поскольку ngForm имеет тип NgFormName, который имеет ссылку _parent.