При использовании ngClass 'Missing Ожидаемый}' получена ошибка

Question

Я пытаюсь условно добавить класс к элементу списка (через селектор дочерних компонентов), в зависимости от размера ширины изображений. Размер ширины жестко запрограммирован, когда новый элемент изображения создается в другом компоненте.

Я продолжаю получать сообщение об ошибке:

«Отсутствует ожидание» в моем галерее-списке. компонент. html файл.

Я не вижу, что мне не хватает} нигде. Может кто-нибудь помочь?

Вот галерея-список html код:

  <ul class="container">
    <li class="item-list-container" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 160 }'><app-image-item
    class="image-item"
    *ngFor="let imageEl of images;"
    [image]="imageEl"
    [ngClass] ="{ 
    'widthOne': imageEl.widthSize === 50px, 
    'widthTwo': imageEl.widthSize === 100px,
    'widthThree': imageEl.widthSize === 150px,
    'widthFour': imageEl.widthSize === 200px,
    }"
    (click)="onImageSelect(imageEl.id)"   
    ></app-image-item>
    </li>
</ul>

Answer 1

Это неправильный синтаксис. Взгляните на эту похожую демонстрацию . Попробуйте

  <ul class="container">
    <li class="item-list-container" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 160 }'><app-image-item
    class="image-item"
    *ngFor="let imageEl of images;"
    [image]="imageEl"
    [ngClass] ="getClass(imageEl.widthSize)"
    (click)="onImageSelect(imageEl.id)"   
    ></app-image-item>
    </li>
</ul>

в ts файле:

getClass(widthSize): string{
  if(widthSize === "50px") {
    return "widthOne"
  }
  if(widthSize === "100px") {
    return "widthTwo"
  }
  if(widthSize === "150px") {
    return "widthThree"
  }
  if(widthSize === "200px") {
    return "widthFour"
  }
}

Примечание:

Я бы порекомендовал вам добавить свойство в массив images решить, какой класс нужно добавить, вместо того, чтобы использовать вызов функции, как я использовал getClass(). Использование функции на HTML является плохой практикой.

Если изображение поступает из какого-либо сервиса, вы можете использовать .map и добавить к нему свойство className.