Typescript {{myArray}}数组绑定未在视图中更新 从“angular2/core”导入{Component}； 从“angular2/common”导入{CORE_指令、FORM_指令、FormBuilder、ControlGroup、AbstractControl、Validators、Control}； @组成部分({ 选择器：'参数窗体'， 指令：[形式指令，核心指令]， 模板：` 参数表 {{arr} 系统参数 添加 提交 ` }) 导出类参数窗体{ myForm：对照组； 系统参数：抽象控制； arr：编号[]； 构造函数（fb:FormBuilder）{ this.myForm=fb.group({ “变现”：[“”]， “numConstSteps”：[“”]， “时间范围”：[“”]， “continuationStep”：[“”]， “continuationStepSign”：[“”]， “numberOfModelParameters”：[“”， “系统参数”：[]， “参数”：[“”]， “netLogoFile”：[“”]， “numberOfModelVariables”：[“”]， “限制运算符”：[“”]， “liftOperator”：[“”]， “xInitial”：[“”] }); this.arr=[]； this.systemParameters=this.myForm.controls[“systemParameters”]； } addToArray（值：任意）：无效{ 此.arr.push（值）； （此.systemParameters.updateValue（“”）； } 提交（形式：任何）：无效{ console.log（this.arr）； form.systemParameters=this.arr； log（“您提交的值：”，表单） } }

当用户通过调用Add函数将值推送到

Arr

array，在systemParameters字段中输入值时，我试图实时显示Arr（数组）中的值

这是[arr in]中“”的错误

无值访问器ParametersForm@2：9]

据我所知，这是由ngModel产生的原因

---

更新：根据甘特的评论，我删除了

ngModel

和核心指令。

{{arr}}

内容不显示，而是在类内部显示。

角度变化检测不识别数组内的变化，只识别数组引用的变化

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

}

addToArray（值：任意）：无效{
//我不认识这个
此.arr.push（值）；
（此.systemParameters.updateValue（“”）；
}

作为您可以使用的变通方法

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

addToArray（值：任意）：无效{
此.arr.push（值）；
this.arr=this.arr.slice（）；
（此.systemParameters.updateValue（“”）；
}

创建数组的副本。Angular可以识别这一点，因为数组本身是另一个数组

正在检查更好的方法…

更新： 从beta.16开始，

{{myArray}}

现在将在视图中更新，即使数组引用没有更改。另请参阅

---

原始答案：

角度变化检测按值进行比较，对于数组和对象，这意味着数组或对象引用。如果视图中仅包含

{{arr}

，则当您

将（）

项推到数组上时，视图中的绑定不会更新，因为数组引用没有更改

但是，通常情况下，模板将在数组中的项上循环：

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

{{item}

在这种情况下，角度变化检测将对数组的每个项进行绑定，因此会注意到

push（）

更新，并更新视图

---

对于调试，如果改用

{{arr | json}

，则在

将（）

推送到数组上时，还会看到视图更新。（这是因为JsonPipe是有状态的，这会导致角度变化检测在每个变化检测周期对其进行评估。）

你不需要再添加

CORE_指令了。类似问题请参见。你能提供一个plunker吗？你不能像在
p
元素上那样使用
ngModel
。
ngModel
用于输入元素。@GünterZöchbauer啊，这是一个plunker
http://plnkr.co/edit/dHJf8QEhhvU5LupdDcmX?p=preview
sow我能做些什么来实时显示数组值呢？谢谢。不过，在
上添加
[（ngModel）]
有什么意义呢？只要删除
[（ngModel）]
就行了。它什么都不做。嗯，用这个更新了plunker，但它说的是[object，mousevent]？啊，我有这个
addToArray（$event，systemParameters.value）
在我的本地代码中，我对stackoverflow post中没有的代码进行了一些修改，删除了它，现在显示了值，谢谢！我同意你的说法，但我认为你可能会说“角度变化检测无法识别阵列内的变化”，这让人感到困惑"，因为通常模板中有一个与数组关联的
NgFor
，然后更改检测将识别对项目的更改。有关更多详细信息，请参阅我的答案。@MarkRajcok感谢您的反馈。我记得您最近提到过它。感谢您的输入这似乎是最佳做法，因此我将其标记为correc但有一个问题，为什么
{{arr | json}}
只用于调试？@PetrosKyriakou，因为通常您不想向用户显示数组或对象的字符串版本。
<div *ngFor="item of arr">{{item}}</div>