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

你的角度版本是什么？

我还没有找到哪个版本是渲染器2

但它适用于渲染器：

@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);
}