Angular 8 ngStyle 有时在循环中不起作用答案

【问题标题】：Angular 8 ngStyle sometimes does not work inside a loopAngular 8 ngStyle 有时在循环中不起作用
【发布时间】：2026-01-30 10:30:01
【问题描述】：

我在 Angular 8 中有以下代码。

<mat-grid-list cols="5" rowHeight="16:9" gutterSize="1%">
    <mat-grid-tile *ngFor="let m of media; index as i">
        <div class="media-cards" [ngStyle]="{'background-image': 'url(' + m.thumbnail + ')'}"></div>
    </mat-grid-tile>
</mat-grid-list>

由于一些奇怪且未知的原因，它没有在循环中生成的某些元素中添加background-image 样式。 m.thumbnail 是一个有效的 URL，可用于 media 对象的每个元素。

这是它的外观（缺少背景图片）：

生成的代码如下所示：

您可以在上图中看到第二个元素缺少background-image 样式。

为什么会这样？问题出在哪里？

【问题讨论】：

在背景样式末尾添加分号会影响什么吗？ 'url(' + m.thumbnail + ');'
@Mickers 我原以为添加分号不会有任何区别。但令我惊讶的是，在添加分号后，我注意到样式没有添加到 4 个元素中的任何一个，而没有它，样式被添加到 2 个元素而不是添加到 2 个元素。
我为 ngStyle 对象添加了另一种样式。 {'background-image': 'url(' + m.thumbnail + ')', 'background-color': 'pink'}。 'background-color': 'pink' 被添加到所有四个元素中，而 background-image 在两个元素中缺失。

标签： angular firebase angular8 ng-style

【解决方案1】：

原来有些 URL 有括号 (... Fitness%20(10).JPG ...)。因此，当我使用样式 'background-image': 'url(__the_url__)' 时，它会因为括号而中断。看起来 Angular 可能会在添加到元素之前验证样式。由于括号中的这些规则无法验证，因此这些规则不会添加到元素中。

因此，我将 URL 包裹在单引号中以使其成为字符串文字，这样括号就不会产生问题并且可以正常工作。它奏效了。

{'background-image': 'url(\'' + m.thumbnail + '\')'}

【讨论】：