使用 ngClass 'Missing expected }' 收到错误

Question

我正在尝试根据图像宽度大小有条件地向列表项添加一个类（通过子组件选择器）。当在另一个组件中创建新的图像项时，宽度大小是硬编码的。

我不断收到错误消息：

“缺少预期的 }”在我的 gallery-list.component.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

这不是正确的语法。看看this similar demo。试试

  <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 属性。