Angular - NgStyle 后备图像答案

【问题标题】：Angular - NgStyle fall back imageAngular - NgStyle 后备图像
【发布时间】：2018-03-31 16:28:38
【问题描述】：

我在用什么

角度

我要做什么

当图像尚未从服务器返回时，使用占位符图像

问题

我不确定语法。这里的任何帮助都会很棒！
会不会有“？”检查我的 ngStyle 背景图片？

&lt;div class="image" [ngStyle]="{'background-image': 'url(' + (image.myImage | async)  + ')'}"&gt;&lt;/div&gt;

【问题讨论】：

标签： angular

【解决方案1】：

你的语法是正确的，但是为了实现你想要的行为，你这样做：

<div *ngIf="image.myImage | async; let img; else loading" 
       class="image" [ngStyle]="{'background-image': 'url(' + img + ')'}">
</div>    

<ng-template #loading>
    <div class="image" [ngStyle]="{'background-image': 'url(/assets/placeholder.png)'}"></div>
</ng-template>

Demo

【讨论】：

【解决方案2】：

<div *ngIf="img" 
   class="image" [ngStyle]="{'background-image': 'url(' + img + ')'}">
 </div>
<div *ngIf="!img" 
   class="image" [ngStyle]="{'background-image':'url(http://via.placeholder.com/350x150)'}">
</div>

【讨论】：

感谢您也回复 Asif。非常感谢。