Angular 5中*ngFor内ngStyle渲染为[Object object]问题求助

我来帮你搞定这个问题！先梳理下核心问题，再给出可行的解决方案：

问题分析 #

你遇到的[Object object]问题，大概率是字符串拼接方式不够可靠，或者你的imageUrl并非直接的字符串URL（比如是包含URL属性的对象）。另外要注意：ng-reflect-ng-style显示[object Object]是Angular调试属性的正常表现，它只是把绑定的对象转成了字符串，真正要关注的是元素实际渲染出的style属性。

解决方案 #

方案1：用ES6模板字符串拼接URL（推荐） #

把原来的字符串拼接换成模板字符串（用反引号`包裹），这种方式更直观且不易出错：

<div class="circle-logo-btm pull-left cp" *ngFor="let imageUrl of (allAppBGIMageURLs$ | async)" (click)="selectApplication(1)">
  <div [ngStyle]="{'background-image': `url(${imageUrl})`}" class="btn-round"></div>
</div>

方案2：确认imageUrl的实际类型 #

如果allAppBGIMageURLs$发出的数组元素不是纯字符串，而是包含URL字段的对象（比如后端返回的{ url: 'xxx.jpg' }），那你需要访问对应的属性：

<div class="circle-logo-btm pull-left cp" *ngFor="let imageUrl of (allAppBGIMageURLs$ | async)" (click)="selectApplication(1)">
  <div [ngStyle]="{'background-image': `url(${imageUrl.url})`}" class="btn-round"></div>
</div>

方案3：抽离样式逻辑到组件类 #

也可以把样式对象写成组件内的方法，让模板更简洁：
在组件类中添加方法：

getBackgroundStyle(imageUrl: string) {
  return { 'background-image': `url(${imageUrl})` };
}

然后在模板中调用：

<div class="circle-logo-btm pull-left cp" *ngFor="let imageUrl of (allAppBGIMageURLs$ | async)" (click)="selectApplication(1)">
  <div [ngStyle]="getBackgroundStyle(imageUrl)" class="btn-round"></div>
</div>

验证方法 #

修改完成后，右键检查元素，查看该div的style属性，确认background-image是否已正确设置为目标URL，不用纠结ng-reflect的调试内容。

内容的提问来源于stack exchange，提问作者Divyanshu Jimmy