如何正確更改 *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 文件夾中的資產。 否則該文件夾將被忽略。