Question

我原本试图在Angular2中设置一个模板引用变量，所以我可以反转表的排序顺序而不必进行绑定但是当我点击复选框时我没有得到界面的动态更新。我创建了一个简单的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等。

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

另一种解决方案是触发＆＃34;观看＆＃34;通过订阅一些输入事件，例如，键盘或输入。

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

并使用一些＆＃34;事件处理程序＆＃34;或假的，如false。你可以看到这很奇怪，避免它。

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

Answer 2

试试这个 -

<input #myInput type="text" value="yeh" (keyup)="myInput.value" /> The INPUT value is "{{myInput.value}}"

看看这是否有帮助。

Angular2模板参考变量和动态更新

2 个答案: