Angular2 模板引用变量和动态更新

Question

我最初试图在 Angular2 中设置一个模板引用变量，这样我就可以在不进行绑定(bind)的情况下反转表格的排序顺序，但是当我单击复选框时我没有得到界面的动态更新.我创建了一个简单的 plunker，以防我的应用程序中有其他东西可能已经弄乱了代码，而且我没有看到动态更新的引用的内插值。我把它做成一个文本框来查看值是否会随着我键入而改变。它似乎没有更新。

我是否在我的设置中遗漏了一些东西来完成这项工作？或者我是否在尝试以一种并非创建它们的目的来使用引用变量？

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

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2> 
       <input #myInput type="text" value="yeh" /> The INPUT value is "{{myInput.value}}"
    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }
}

Answer 1

与 <input #myInput type="text" value="yeh" />您创建了对 DOM 元素的本地模板引用，但这并不意味着 Angular 会监视它的值或任何其他任意属性，例如 checked等

如果您需要观察值(value)，您最好使用 ngModel 或 ngControl(参见另一个答案(现已删除:<input [(ngModel)]="myInput" type="text" value="yeh" />))。

另一种解决方案是通过订阅一些输入事件来触发“观看”，例如按键或输入。

<input #myInput type="text" (input)="false" value="yeh" /> {{ myInput.value }}

并使用一些“事件处理程序”或伪造的，例如false .如您所见，这真的很奇怪，请避免它。

演示: http://plnkr.co/edit/JIwPDPyYFnkDtz99sew3?p=info