javascript - Angular 2 根据ngFor索引生成类名

Question

我在创建基于 Angular 2 ngFor 循环索引的动态类名时遇到了问题。我不得不使用以下语法，因为 Angular 2 不喜欢在同一元素上使用 ngFor 和 ngIf。

使用此语法，我如何创建一个动态类名，其索引值为 {{index}}。我知道这不是正确的 A2 代码，但我将它放在我的代码示例中以向您展示我希望该值出现的位置。

<div class="product-detail__variants">
    <template ngFor #variant [ngForOf]="variants" #index="index">
        <div *ngIf="currentVariant == index">
            <div class="product-detail-carousel-{{index}}">

            </div>
        </div>
    </template>
</div>

值“variants”是一个设定长度的空数组。因此，“变体”没有任何值(value)。

“currentVariant”是一个默认为 0 的数字。

编辑:上面的代码是正确的。我有另一个我认为与此代码相关的无关错误。

Answer 1

我不太明白你的问题;-)

有两种方法可以为特定元素设置类:

• 使用花括号的方式:

  @Component({
    selector: 'my-app',
    template: `
      <div class="product-detail__variants">
        <template ngFor #variant [ngForOf]="variants" #index="index">
          <div *ngIf="currentVariant == index">
            <div class="product-detail-carousel-{{index}}">
              Test
            </div>
          </div>
        </template>
      </div>
    `,
    styles: [
      '.product-detail-carousel-2 { color: red }'
    ]
  })
  

  Test 仅针对第三个元素(索引 2)以红色显示。

• 正如@Langley 使用ngClass 指令所建议的那样

  import {NgClass} from 'angular2/common';
  
  @Component({
    selector: 'my-app',
    template: `
      <div class="product-detail__variants">
        <template ngFor #variant [ngForOf]="variants" #index="index">
          <div *ngIf="currentVariant == index">
            <div class="product-detail-carousel-{{index}}">
              Test
            </div>
          </div>
        </template>
      </div>
    `,
    styles: [
      '.product-detail-carousel-2 { color: red }'
    ],
    directives: [ NgClass ]
  })
  

  不同的是，您需要在组件的 providers 属性中指定 NgClass 指令。同样，Test 仅针对第三个元素(索引 2)显示为红色。

您的以下句子:“值 variants 是一个设置长度的空数组。variant 因此没有值。currentVariant 是一个默认情况下等于 0 的数字。”。如果您的数组为空，您希望如何显示内容。 ngFor 是一个迭代...

希望对你有帮助，蒂埃里