Angular 2基于ngFor索引生成类名

Question

我在创建基于Angular 2ngFor循环索引的动态类名时遇到了一个问题。我不得不使用以下语法，因为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”是一个设置长度的空数组。因此，“变量”没有价值。

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

编辑:上面这段代码是正确的。我还发现了另一个无关的错误，我认为它与这段代码有关。

Answer 1

如果有人希望根据索引添加特定类，您可以执行此类操作。我个人也更喜欢这里的语法。假设您想将最后一段添加到数组的最后一段：

<p
  *ngFor="let p of paragraphs; let i = index"
  [class.last-para]="i >= paragraphs.length - 1">
  {{p}}</p>

Answer 2

我真的不明白你的问题;-）

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

>

使用大括号的方式：

@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 }'
  ]
})

测试仅针对第三个元素（索引 2）显示为红色。

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

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 ]
})

不同的是，您需要在组件的＜code＞providers＜/code＞属性中指定NgClass指令。同样，＜code＞测试＜/code＞仅显示第三个元素（索引2），并显示为红色。

您的以下句子：“值变体是一个设置长度的空数组。变体因此没有值。当前变体是一个默认等于0的数字。”。如果您的数组为空，您如何期望显示某些内容。一个ngFor是一个迭代…

希望对你有帮助，泰瑞