Ionic 3 / Angular 2 - Renderer2.setValue（）不更新输入字段的值

Question

我正在尝试更新未绑定到组件中的<form>的输入值，我的研究使我使用Angular提供的Renderer2服务。

所以我的输入看起来像这样：

<input type="text" #zipEl placeholder="Enter zip">
<button type="button" (click)="getLocation()">
   <span>Use current location</span>
</button>

在我的组件中，我试图像这样设置值：

@ViewChild('zipEl') zipEl:ElementRef;

constructor(private renderer: Renderer2) {

}

getLocation() {
    this.renderer.setValue(this.zipEl, '94085');
}

虽然什么也没发生。当我单击按钮运行该函数时，输入框永远不会使用94085更新其值。有谁知道我在这里做错了什么？

提前致谢！

Answer 1

我相信你需要使用setProperty：

getLocation() {
    this.renderer.setProperty(this.zipEl.nativeElement, 'value', '94085');
}

Answer 2

使用Angular v4.0.2，我最终使用了此处显示的.setAttribute()函数：

getLocation() {
    this.renderer.setAttribute(this.zipEl, 'value', '94085');
}

Answer 3

你的角度版本是多少？

我还没有找到Renderer2的版本

但它与Renderer一起使用：

  @ViewChild('zipEl') zipEl:ElementRef;
  constructor(public renderer: Renderer) {
  }


  getLocation() {
    this.renderer.setElementAttribute(this.zipEl.nativeElement, 'value', '94085');
  }

Answer 4

你可以这样试试：

  constructor(element: ElementRef, renderer: Renderer2) {
    const input = renderer.createElement('input');
    renderer.setAttribute(input, 'value', '94085');
    renderer.listen(input, 'keyup', (ev) => {
      console.log(ev);
    });
    renderer.appendChild(element.nativeElement, input);
  }