{{туАггау}} Массив привязки не обновляется с учетом

Question

import {Component} from "angular2/core"; 
import {CORE_DIRECTIVES, FORM_DIRECTIVES, FormBuilder, ControlGroup, AbstractControl, Validators, Control} from "angular2/common"; 

@Component({ 
    selector: 'parameters-form', 
    directives: [FORM_DIRECTIVES,CORE_DIRECTIVES], 
    template: ` 
     <h1>Parameters Form</h1> 
     <p [(ngModel)]='arr'>{{ arr }}</p> 
     <form [ngFormModel]="myForm" (ngSubmit)="onSubmit(myForm.value)" class="ui form"> 

<div class="field"> 
      <label for="systemParameters">System Parameters</label> 
      <input type="number" 
        id="systemParameters" 
        placeholder="systemParameters Param" 
        [ngFormControl]="systemParameters"> 

      <button type="button" (click)="addToArray(systemParameters.value)">Add</button> 

      </div> 
<button type="submit" class="ui button">Submit</button> 
     </form> 
    ` 
}) 

export class ParametersForm { 
    myForm: ControlGroup; 
    systemParameters: AbstractControl; 
    arr: number[]; 
    constructor(fb: FormBuilder) { 
    this.myForm = fb.group({ 
     "realisations" : [""], 
     "numConstSteps" : [""], 
     "timeHorizon": [""], 
     "continuationStep" : [""], 
     "continuationStepSign" : [""], 
     "numberOfModelParameters" : [""], 
     "systemParameters" : [], 
     "param" : [""], 
     "netLogoFile" : [""], 
     "numberOfModelVariables" : [""], 
     "restrictOperator" : [""], 
     "liftOperator" : [""], 
     "xInitial" : [""] 

    }); 
    this.arr = []; 
    this.systemParameters = this.myForm.controls["systemParameters"]; 
    } 
    addToArray(value: any): void { 
    this.arr.push(value); 
    (<Control>this.systemParameters).updateValue(""); 
    } 
    onSubmit(form: any): void { 
    console.log(this.arr); 
    form.systemParameters = this.arr; 
    console.log("your submitted value:", form) 
    } 

} 

я пытаюсь показать значения внутри Arr (массив) в режиме реального времени, когда пользователь вводит значение в поле SystemParameters при вызове функции Add, которая выталкивает значение до arr массив.

это ошибка No value accessor for ''" in [arr in ParametersForm@2:9]

причина его от ngModel Thats настолько, насколько я знаю.

Обновлено: Основано на комментариях Гюнтера. Я удалил как ngModel, так и директивы Core. Содержимое {{arr}} не отображается, а внутренне в классе, который они выполняют.

Answer 1

Update: По beta.16, {{myArray}} теперь будет обновляться в представлении, даже если ссылка на массив не изменился. Смотрите также {{myArray}} now updates in the view as of beta.16

---

Оригинальный ответ:

Угловое обнаружения изменения сравнивает по значению, так и для массивов и объектов, это означает, что массив или объект ссылки. Если в вашем представлении просто есть {{arr}, то это привязка в представлении не будет обновляться, когда вы нажмете push() элементов на массив, потому что ссылка массива не изменилась.

Однако, как правило, шаблон будет цикл по элементам в массиве:

<div *ngFor="item of arr">{{item}}</div> 

В этом случае угловые обнаружения изменения будут иметь привязки для каждого элемента массива, поэтому push() обновления будет замечено , и представление будет обновлено.

Для отладки, если вы используете {{arr | json}}, вы также увидите обновление вида, когда вы получите push() на массив. (Это связано с тем, что JsonPipe имеет статус stateful, что вызывает обнаружение углового изменения, чтобы оценить его каждый цикл обнаружения изменений.)

Answer 2

обнаружение Угловое изменение не распознает изменения в массивах, только изменения в массиве ссылки

addToArray(value: any): void { 
    // Angular doesn't recognize this 
    this.arr.push(value); 
    (<Control>this.systemParameters).updateValue(""); 
    } 

в качестве временного решения можно использовать

addToArray(value: any): void { 
    this.arr.push(value); 
    this.arr = this.arr.slice(); 
    (<Control>this.systemParameters).updateValue(""); 
    } 

создать копию массива. Угловое распознает это, потому что сам массив является другим.

Проверка лучшего способа ...