如何正确更改 *ngFor Items 中的样式？

Question

所以我在组件的 HTML 文件中使用 *ngFor 为食品应用程序中的食谱制作快速界面。 我有一个问题。 您会看到，当需要更改关键属性（例如具有 url() 更改的 CSS 属性的背景图像）时，我在应用涉及动态名称更改的样式时遇到了困难。 （我的 HTML 模板中 *ngFor 指令中的配方名称。）这些名称各不相同。

此外，我正在从组件的 ts 文件中检索此信息，该文件链接到 JSON 格式的对象数组所在的服务。

我正在通过点符号访问这些属性，以便使用模板进行简单的更改

<h1>{{recipe.recipeName}}</h1>

我正在尝试在该标题下放置一张图片，该图片与我的图像文件夹（已下载）中的图片相匹配，因此我尝试了类似...

 style.backgroundImage="{{'url(../../../imgs/food/startRecipes/' + **recipe.recipeName** +'.jpg)'}}"

这只是导致我在查找文件时出错（我知道事实存在的地方！）我收到了 404 错误...

http://localhost:4200/imgs/food/guacamole.jpg **404 (Not Found)**

我在 JSON 数组中也有一些食谱，它们的名称中有一个空格，但我找不到一种简单的方法来删除它们......我尝试使用替换方法（我来自学习 JavaScript）但它并没有完全奏效任何一个。

你有什么建议？ 我真的迷失在这里。 我还在学习 Angular，我还没有完全掌握课程中的管道部分。 但是，我确信在这种情况下有一种更简单的方法可以做到，也许是 ngStyle 方法，或者类似的方法！ 任何帮助是极大的赞赏。

Answer 1

去angular-cli.json并寻找这样的东西

{
"apps": [{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "imgs",
    "favicon.ico"
  ]
}]
}

通过在资产列表中添加imgs文件夹名称，您将告诉 angular 对于不可路由的 Get 请求，它也应该查看 imgs 文件夹中的资产。 否则该文件夹将被忽略。