HTML 中的属性和属性有什么区别？

Question

我为输入元素创建了一个自定义表单控件（使用 ControlValueAccessor），具有以下用于 writeValue 方法的代码。

@ViewChild('inputElement', {static: true}) input;    
writeValue(obj: any): void {
    this.renderer.setAttribute(this.input.nativeElement, 'value', obj);
}

此方法仅更新视图（输入元素）一次，即我初始化表单时。如果我手动修补与上述组件关联的表单控件的值，则表单控件会更新，但视图不会更新。

但是，如果我使用setProperty方法而不是setAttribute方法，如下所示，

@ViewChild('inputElement', {static: true}) input; 
writeValue(obj: any): void {
    this.renderer.setProperty(this.input.nativeElement, 'value', obj);
}

视图得到更新。

但问题是，文档说value是HTML 中的一个属性，而不是dom 属性。

有人能解释一下 HTML 中的属性和属性有什么区别，这在 Angular 的 Renderer2 中产生了这种行为吗？

Answer 1

HTML 中的 input 元素有一个属性和一个名为value的属性。

1. Value 属性- 表示输入元素的当前值。
2. 值属性- 表示输入元素的初始值。

因此，在 HTML 中，属性是在 HTML 元素上定义的，并且应该是创建这些元素时传递给它们的初始值。一旦浏览器创建了 DOM（也就是在渲染页面之后），HTML 元素就变成了对象（节点对象），因此它们具有属性。

因此，为了使用angular的Renderer2改变输入元素的当前值，需要使用setProperty方法。

如果您使用 setAttribute 方法，它只会更改一次值，即在您创建元素时。它不会改变当前值。