阵列更新后面的Angular2机制

Question

我是Angular2的新手（刚开始学习弱点）。我试图掌握组件之间可观察和数据交换的概念。

我创建了一些代码，用户可以在表单中输入数据。

    <form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">
      <div class="form-group">
        <input type="string" class="form-control" id="someValue" [formControl]="myForm.controls['someValue']">
      </div>
  <button type="submit">Submit</button>
</form>

此操作应该：

1. 更新元素列表

       <ul> <li *ngFor="let val of valsList"> {{ val.someValue }} </li</ul>
   

2. 显示元素计数器

   {{计数器}}

我用一个例子来创建一个Plunker。

http://plnkr.co/edit/pkIpmdS2uOmb7Rf4FfAH?p=preview

现在我不明白的是为什么列表会自动更新。必须有某种约束力，但究竟是什么以及如何准确？

Simmilar for counter的方法无效。

问候。

Answer 1

您未在应用程序中使用Observable，要了解组件交互的工作原理，您可以查看here

在Plunker中你将对象推入valsList因此你的网格正在更新，因为它直接绑定到valsList对象。

然而，对于counter，您正在创建一个不同的实例并更新它，因此计数器组件没有获取该值。

如果你将counter包装到对象中并在组件中使用它它将起作用（因为你没有创建新的计数器实例只是更新现有对象）

检查Plunker !!

希望这会有所帮助!!