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" 是一个长度为零的空数组。因此，"variant" 没有值。

"currentVariant" 是一个数字，默认值为 0。

编辑：上面的代码是正确的。我有另一个无关的错误，我以为它与这段代码有关。

- AJStacy

---

你尝试过使用 ngClass 吗？https://angular.io/docs/ts/latest/api/common/NgClass-directive.html - Langley

我的代码显然是正常工作的，另一个无关的错误使其混乱了。这段代码是正确的！ - AJStacy

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

  只有第三个元素（索引为2）会显示为红色，其它不会显示。原文中使用了Test来示例展示。

• 根据 @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是一个迭代器...

希望这对你有所帮助， Thierry

- Thierry Templier

---

我并不是试图显示一个值，而只是尝试根据一个名为“numVariants”的值将其转换为数组长度，以便ngFor循环一定次数（因为ng-repeat已经不存在了）。显然，我还有另一个无关的错误影响了我的代码，而我的Angular 2代码已经是正确的。感谢您为我验证它。 - AJStacy

Answer 2

如果有人想根据索引添加特定的类，可以像这样做。我个人更喜欢这里的语法。假设您想将last-para添加到数组中的最后一个段落：

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

- Ian Jamieson