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}}现在将在视图中更新，即使数组引用未更改。另请参阅{{myArray}} now updates in the view as of beta.16

原始回答：

角度变化检测按值进行比较，对于数组和对象，则表示数组或对象引用。如果您的视图中只包含{{arr}，那么当您将push()个项目放入数组时视图中的绑定将不会更新，因为数组引用未更改。

但是，通常，模板会循环遍历数组中的项目：

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

在这种情况下，角度变化检测将对数组的每个项目具有绑定，因此将注意到push()更新，并且视图将被更新。

对于调试，如果您使用{{arr | json}}，当您push()进入阵列时，您还会看到视图更新。（这是因为JsonPipe是有状态的，这导致角度变化检测在每个变化检测周期中对其进行评估。）

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("");
  }

创建数组的副本。 Angular认识到这一点，因为数组本身就是另一个。

检查更好的方法......

{{myArray}}数组绑定未在视图中更新

2 个答案: