typescript - {{myArray}} 数组绑定(bind)未在 View 中更新

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(数组)中的值，当用户通过调用将值推送到 arr 数组的 Add 函数在 systemParameters 字段中输入值时。

这是错误 No value accessor for ''"in [arr in ParametersForm@2:9]

据我所知，它的原因来自 ngModel。

更新:根据 Günter 的评论，我删除了 ngModel 和 Core 指令。 {{arr}} 内容不显示，但在它们显示的类内部。

Answer 1

更新: 从 beta.16 开始，{{myArray}} 现在将在 View 中更新，即使数组引用没有更改。另见 {{myArray}} now updates in the view as of beta.16

---

原答案:

Angular 变化检测按值进行比较，对于数组和对象，这意味着数组或对象引用。如果您的 View 中只有 {{arr}，那么当您将 push() 项目放入数组时， View 中的绑定(bind)不会更新，因为数组引用没有改变。

但是，通常情况下，模板会遍历数组中的项目:

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

在这种情况下，Angular 变化检测将绑定(bind)数组的每一项，因此 push() 更新将被注意到，并且 View 将被更新。

为了调试，如果您改为使用 {{arr | json}}，当你 push() 到数组时，你也会看到 View 更新。 (这是因为 JsonPipe 是有状态的，这会导致 Angular 变更检测在每个变更检测周期对其进行评估。)