角- NgStyle倒车图像

Question

我用的是

• 角度

我想做什么，

• 当没有从服务器返回图像时，使用占位符图像

问题

• 我对语法不太清楚。这里的任何帮助都会很棒！
• 会不会有“？”检查我的ngStyle背景图像？

​

<div class="image" [ngStyle]="{'background-image': 'url(' + (image.myImage | async)  + ')'}"></div>

​

Answer 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>

演示

Answer 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>