角为4的动态类

Question

我正在尝试用ngFor创建列表，我需要<li>标记有一个动态类，从十六进制到十六进制-19，但是我得到了它：

​

<ul class="hex-container">
        <li *ngFor="let total of item1;let i=index" [ngClass]="'hex hex-'+ i"></li>
        <li *ngFor="let total of item2;let i=index" [ngClass]="'hex hex-'+ i"></li>
        <li *ngFor="let total of item3;let i=index" [ngClass]="'hex hex-'+ i"></li>
        <li *ngFor="let total of item4;let i=index" [ngClass]="'hex hex-'+ i"></li>
      </ul>
      
      
      
// I got

<ul _ngcontent-c9="" class="hex-container">
    <!---->
    <li _ngcontent-c9="" class="hex hex-0"></li>
    <li _ngcontent-c9="" class="hex hex-1"></li>
    <li _ngcontent-c9="" class="hex hex-2"></li>
    <li _ngcontent-c9="" class="hex hex-3"></li>
    <li _ngcontent-c9="" class="hex hex-4"></li>
    <li _ngcontent-c9="" class="hex hex-5"></li>
    <li _ngcontent-c9="" class="hex hex-6"></li>
    <!---->
    <li _ngcontent-c9="" class="hex hex-0"></li>
    <li _ngcontent-c9="" class="hex hex-1"></li>
    <li _ngcontent-c9="" class="hex hex-2"></li>
    <li _ngcontent-c9="" class="hex hex-3"></li>
    <li _ngcontent-c9="" class="hex hex-4"></li>
    <li _ngcontent-c9="" class="hex hex-5"></li>
    <li _ngcontent-c9="" class="hex hex-6"></li>
    <li _ngcontent-c9="" class="hex hex-7"></li>
    <li _ngcontent-c9="" class="hex hex-8"></li>
    <li _ngcontent-c9="" class="hex hex-9"></li>
    <li _ngcontent-c9="" class="hex hex-10"></li>
    <!---->
    <li _ngcontent-c9="" class="hex hex-0"></li>
    <li _ngcontent-c9="" class="hex hex-1"></li>
    <!---->
</ul>

​

我要做什么才能得到六六点零到十六进制-19或更多？

更新：我需要为项目N1，N2，N3和N4添加一个特定的类，比如class=“十六进制-0 n1"，class=”十六进制-1 n2"，.

Answer 1

尝试将数组与扩展运算符组合在一起

在component.ts中

  totalSquadsN1 = [1, 2, 3, 4];
  totalSquadsN2 = [1, 2, 3, 4];
  totalSquadsN3 = [1, 2, 3, 4];
  totalSquadsN4 = [1, 2, 3, 4];
  totalSquads = [...this.totalSquadsN1, ...this.totalSquadsN2, ...this.totalSquadsN3, ...this.totalSquadsN4];

在component.html中

<ul _ngcontent-c9="" class="hex-container">
<li *ngFor="let total of totalSquads;let i=index" [ngClass]="'hex hex-'+ i">{{i}}</li>
</ul >

更新，因为问题已经发生了.

如果您需要将一组数组组合到一个长列表中，但是可以为每个数组分配一个特定的类，则可以使用forEach方法(注意:这只是一个例子)

  totalSquadsN1 = [1, 2, 3, 4];
  totalSquadsN2 = [1, 2, 3, 4];
  totalSquadsN3 = [1, 2, 3, 4];
  totalSquadsN4 = [1, 2, 3, 4];
  totalSquads = [];

  constructor() {
    let i = 1;
    let arrays = [this.totalSquadsN1, this.totalSquadsN2, this.totalSquadsN3, this.totalSquadsN4];
    arrays.forEach((array) => {
      array.forEach((instance) => {
        this.totalSquads.push({value: instance, class: 'n' + i});
      });
      i++;
    });
  }

然后在html中

<ul _ngcontent-c9="" class="hex-container">
  <li *ngFor="let total of totalSquads;let i=index" [ngClass]="'hex hex-'+ i +  ' ' +  total.class ">{{i}}</li>
</ul >