Angular 2 根据 ngFor 索引生成类名答案

【问题标题】：Angular 2 Generate Class Name Based on ngFor IndexAngular 2 根据 ngFor 索引生成类名
【发布时间】：2016-04-19 02:23:36
【问题描述】：

我在创建基于 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”是一个设定长度的空数组。因此，“变体”没有任何价值。

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

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

【问题讨论】：

你试过ngClass 吗？ angular.io/docs/ts/latest/api/common/NgClass-directive.html
我的代码显然可以工作，但另一个无关的错误正在抛出它。这段代码是正确的！

标签： javascript typescript angular

【解决方案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 是一个迭代...

希望对你有帮助蒂埃里

【讨论】：

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

【解决方案2】：

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

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

【讨论】：