如何在Angular 2中添加条件属性？

14 浏览
0 Comments

如何在Angular 2中添加条件属性？

我该如何有条件地添加元素属性，例如复选框的checked属性？

以前的Angular版本有NgAttr和NgChecked，这些都似乎提供了我想要的功能。然而，在Angular 2中，这些属性似乎不存在，我没有找到其他提供此功能的方法。

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

\n\n在Angular2中，属性的语法为\n



\n将角色属性绑定到表达式myAriaRole的结果。\n所以可以像这样使用\n


[attr.role]="myAriaRole ? true: null"




									

				

									

			

			
0

		

	



											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
null会将它移除：




[attr.checked]="value ? '' : null"





或者




[attr.checked]="value ? 'checked' : null"





提示：


属性与属性值的区别


当你在 HTML 元素中添加这个绑定时，如果该属性名（在本例中为 checked）不存在且同一元素上没有应用 Angular 组件或指令，其下的 @Input() checked;，则无法使用 [xxx]="..."。  


详见 What is the difference between properties and attributes in HTML?


没有该属性时，怎么绑定


可选的有 [style.xxx]="..."、[attr.xxx]="..."、[class.xxx]="..."，具体视你想完成的功能而定。 


因为  只有 checked 属性，没有 checked 属性，因此 [attr.checked]="..." 是这种特定情况的正确方式。


属性只能处理字符串值


常见的陷阱是对于 [attr.xxx]="..." 绑定，该值（...）总是被字符串化了。只有属性和 @Input() 可以接收其他值类型，如布尔、数字、对象等。  


大多数元素的属性和属性值是相互关联且具有相同的名称。


属性-属性值的连接


当绑定到属性时，属性值也只接收来自属性的字符串化值。

当绑定到属性时，属性将接收绑定到它的值（布尔、数字、对象等），而属性值再次接收字符串化值。


有两种情况，那就是属性和属性名不一致。



自那时起，Angular已经发生了变化，并知道这些特殊情况，并处理它们，因此您可以绑定到 

			

			
0