如何正确更改 *ngFor 项目的样式？

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 文件夹中的资产。否则该文件夹将被忽略。