Question

  <div *ngFor="let project of projects; let i = index;">
    <div class="project-card details-complete */random class/*">
    </div>
  </div>

我有预定义的类= ['teal'，'pink'，'green'，'orange'，'magenta']；当* ngFor填充DOM时，我想随机分配这些类之一。我试图通过在组件中生成随机的0-4数字并分配[class] =“ randomClassName（）：className”来实现，但是在检查错误后我得到了表达式更改。 [ngClass]也没有帮助。有什么方法可以使用指令或其他api来实现此目标？

Answer 1

@Directive({
  selector: '[randomColor]'
})
export class RandomColorDirective implements OnInit {
   constructor(private elRef: ElementRef, private renderer: 
   Renderer2) {}
   ngOnInit(): void {
     const COLORS = ['teal', 'pink', 'green', 'orange', 
     'magenta'];
     let randomNumber = Math.floor(Math.random() * 
     COLORS.length);
     this.renderer.addClass(this.elRef.nativeElement, 
     `${COLORS[randomNumber]}`);
  }
}

以防万一有人需要它，我使用上面的指令解决了它。

Answer 2

假设项目是您的数组，所以我可以为每个项目映射颜色。我有一种颜色

colors = ['grad1', 'grad2', 'grad3', 'grad4', 'grad5', 'grad6'];

您可以在.scss文件中声明此颜色类，并在.ts文件中映射此颜色，如下所示

this.projects.map(project => {
          project.color = this.colors[Math.floor(Math.random() * this.colors.length)];
          return project;
        });

还更新您的.html文件，如下所示

<div *ngFor="let project of projects; let i = index;">
    <div class="project-card details-complete" [ngClass]="project.color">
    </div>
  </div>

Answer 3

在您的.ts文件中-

public classValues = ['teal', 'pink', 'green', 'orange', 'magenta'];

在您的HTML文件中-

 <div *ngFor="let project of projects; let i = index;">
    <div class="project-card details-complete classValues[i]" 
    [ngClass] = "(index == classValues.length - 1) ? index = 0:''">
    </div>
  </div>

如何为DOM中的* ngFor生成的元素分配随机类？

3 个答案: