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>

价值＆＃34;变种＆＃34;是一个设定长度的空数组。＆＃34;变体＆＃34;因此没有价值。

＆＃34; currentVariant＆＃34;是一个默认等于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）和红色。

您的以下句子：＆＃34;值variants是一个设定长度的空数组。 variant因此没有价值。 currentVariant是一个默认等于0的数字。＆＃34;。如果数组为空，您期望显示某些内容。 ngFor是迭代......

希望它可以帮到你，亨利

Answer 2

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

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

Angular 2基于ngFor索引生成类名

2 个答案: