Angular 8 ngStyle有时在循环内不起作用
德比普拉萨德
我在Angular 8中有以下代码。
<mat-grid-list cols="5" rowHeight="16:9" gutterSize="1%">
<mat-grid-tile *ngFor="let m of media; index as i">
<div class="media-cards" [ngStyle]="{'background-image': 'url(' + m.thumbnail + ')'}"></div>
</mat-grid-tile>
</mat-grid-list>
由于某些奇怪和未知的原因，它不会background-image在循环中生成的某些元素中添加样式。m.thumbnail是有效的URL，可用于media对象的每个元素。
这是它的外观（缺少背景图片）： 
生成的代码如下所示： 
您可以在上图中看到background-image第二个元素缺少该样式。
为什么会这样呢？问题出在哪儿？
德比普拉萨德
原来，某些URL带有括号（... Fitness％20（10）.JPG ...）。因此，当我使用style时'background-image': 'url(__the_url__)'，由于括号而中断。看起来Angular在将样式添加到元素之前可能正在验证样式。由于这些规则由于括号而无法验证，因此不会将其添加到元素中。
因此，我将URL括在单引号中，使其成为字符串文字，以便括号不会造成问题，并且可以正常工作。而且有效。
{'background-image': 'url(\'' + m.thumbnail + '\')'}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
- 上一篇：在使用sklearns的LabelEncoder（）时，如何检查为哪个标签分配了什么值？
- 下一篇：对于绑定了NetTcpBinding的端点，找不到与方案net.tcp匹配的基地址。基址方案为[http]
相关文章
Related 相关文章
- 1
ngStyle在Angular中不起作用
- 2
Angular 2 ngModel 双向绑定有时不起作用
- 3
循环 8 次时嵌套 For 循环不起作用
- 4
编辑组件中的验证在Angular 8中不起作用
- 5
选择控件绑定在Angular 8中不起作用
- 6
Angular 7 Cordova 8 后退按钮覆盖不起作用
- 7
Angular 8 - *ngIf 和 mat-checkbox 不起作用
- 8
将物化添加到 angular 8 不起作用
- 9
Angular 8解析器不起作用：没有解析器提供程序
- 10
Angular patchValue 在循环内不起作用。为什么？
- 11
Angular 8集成测试-Proctrator / Jasmine起作用，Protractor /黄瓜不起作用
- 12
CSS文本溢出：在Angular 8中使用CSS网格时省略号不起作用
- 13
为什么Angular 8路由器在带有WkWebView的Cordova IOS中不起作用？
- 14
带有Angular指令的HTML在附加时不起作用
- 15
Angular IE8 attrs。$ set / element.attr不起作用
- 16
异步自定义验证器不起作用并在Angular 8中显示错误消息
- 17
Angular 8嵌套路由和多个路由器出口不起作用
- 18
共享模块中的Angular 8指令不起作用
- 19
多个模板引用在Angular 8中使用@ ViewChild不起作用
- 20
为什么媒体查询在Angular8中不起作用
- 21
[disabled] =“！isValid（）”在Angular 8的IE11中不起作用
- 22
Angular IE8 attrs。$ set / element.attr不起作用
- 23
Angular 8：电子邮件验证器消息不起作用
- 24
如何在Angular 8中循环iframe
- 25
对Angular 8中模态的循环依赖
- 26
在 angular8 中动态加载 HTML 模板有效，但将属性绑定到内插字符串不起作用
- 27
Angular 8在注销时清除localStorage
- 28
没有TypeScript的Angular 8依赖注入？
- 29
Angular 8：没有MultilevelMenuService的提供程序
我来说两句