Angular 8 ngStyle 有时在循环内不起作用

Question

我在 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 样式。

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

Answer 1

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

所以，我用单引号将 URL 括起来，使其成为字符串文字，这样圆括号就不会产生问题，并且可以正常工作。它奏效了。

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

Angular 8 ngStyle 有时在循环内不起作用

Angular 8 ngStyle sometimes does not work inside a loop

firebase

ng-style

angular

angular8