Angular2模板参考变量和动态更新 [英] Angular2 Template Reference Variables and dynamic updating

问题描述

我最初试图在Angular2中设置模板引用变量，因此我可以颠倒表格的排序顺序而不必进行绑定，但是当我单击复选框时我没有得到接口的动态更新.我创建了一个简单的插件，以防万一我的应用程序中有其他内容可能使代码混乱，并且我看不到引用的插值会即时更新.我将其设置为文本框，以查看该值是否会随着我键入的内容而改变.它似乎没有更新.

I was originally trying to set up a template reference variable in Angular2 so I could reverse the sort order of a table without having to do the binding but I wasn't getting the dynamic updating of the interface when I was clicking the checkbox. I created a simple plunker in case I had something else in my app that might have been messing with the code and I don't see the interpolated value of the reference being updated on the fly. I made it a textbox to see if the value would change as I typed. It doesn't appear to be updating.

我是否在设置中缺少某些内容才能进行此工作?还是我试图以不被创建为使用参考变量的方式使用参考变量?

Am I missing something in my setup to make this work? Or am I trying to use the reference variables in a way they weren't created to be used for?

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

推荐答案

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

With <input #myInput type="text" value="yeh" /> you create a local template reference to DOM element, however it doesn't mean Angular watches it's value or any other arbitrary property, like checked, etc.

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

If you need to watch value you should better use ngModel or ngControl (see another answer (which is deleted now: <input [(ngModel)]="myInput" type="text" value="yeh" />)).

另一种解决方案是通过订阅某些输入事件来触发观看"，例如键或输入.

Another solution is to trigger "watching" by subscribing to some of the input events, e.g. keyup or input.

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

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

and use some "event handler" or fake one, like false. As you can see this is really weird, avoid it.

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

这篇关于Angular2模板参考变量和动态更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！