Angular 2基于ngFor索引生成类名-Java 学习之路

我遇到了基于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”是一个设定长度的空数组 . 因此，“变体”没有任何 Value .

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

EDIT ：上面的代码是正确的 . 我有另一个与我认为与此代码相关的无关错误 .

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

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

回复于 2024-05-03T15:20:38+08:00

Angular 2基于ngFor索引生成类名

1 回答

相关问题