Angular的ng-style添加了一个样式属性，但未能保持同步。

13 浏览
0 Comments

Angular的ng-style添加了一个样式属性，但未能保持同步。

我的Angular网站从Web API后端获取数据，最初显示一个通用的背景。但是在登录后，会检索客户背景图像的URL，并在我的ng-style属性中使用它。

当页面最初加载时，还会出现一个不在源代码中的样式属性，将背景指向默认图像。

但是在登录后，即使ng-style现在显示了正确的背景图像URL，样式属性仍然指向默认URL。

如果我手动刷新页面（在Chrome的开发者设置中禁用缓存），样式属性会更新，客户背景将正确显示。

发生了什么？为什么Angular会添加一个样式属性，然后不保持同步？

源代码





初始页面加载








登录后








强制禁用缓存刷新后








修复的代码




  






重新打开：


在我看来，这个问题不同，因为它仅涉及HTML，而不涉及$digest和脚本，并展示了页面处于不同状态时的阶段。但我遵从您的判断 🙂

															

							

															

						

						
0

					

				


			


			
			

	

		

			

				1
				答案			


					


		
		

			
				
											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
Angular的ng-style添加了一个style属性，但该属性无法与其他属性同步更新。这个问题的原因是在ng-style中使用了插值表达式{{}}，应该直接在其中使用scope变量。解决方法是去掉插值表达式，直接使用括号将表达式包裹起来，以确保OR操作在拼接之前执行。下面是修复后的代码：




<div class="background-div" 
   ng-style="{'background-image': 'url('+user.profile.Customer.BackgroundImageUrl || 
   '../images/bg.jpg'+')'}">
</div>




我必须在表达式周围加上括号，这样它才会在拼接之前执行OR操作。然后它就可以正常工作了。下面是修复后的代码。


不要在ng-style中使用插值表达式的括号。


我是说我必须使用（）而不是{{}}。谢谢！


哦，我误解了。抱歉，谢谢你的帮助。


希望能对你有所帮助。

									

				

									

			

			
0