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 в некоторые элементы, сгенерированные в l oop , 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 + '\')'}