Angular 2基于ngFor索引生成类名

Question

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

使用此语法,如何使用index at的值创建动态类名{{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"是一个设定长度的空数组.因此,"变体"没有任何价值.

"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是迭代......

希望它对你有帮助,蒂埃里