Question

我正在寻找一种将这些来自服务器的复选框拆分为一个tr的方法，其中每个tr具有5个tds，我正在通过ngFor显示它

这是模板：

这是组件：

Diretiva: any = [];

loadDiretiva() {
  return this.restApi.getDiretivas().subscribe((data: {}) => {
    this.loading = true;
    this.Diretiva = data;
  });
}

模板：

<tbody class="text-center ">
  <tr>
    <td *ngFor="let diretiva of Diretiva">
      <div class="checkbox c-checkbox">
        <label>
          <input type="checkbox">
          <span class="fa fa-check"></span>
        </label>
      </div>
      <label>{{diretiva.nome}}</label>
    </td>
  </tr>
</tbody>

Answer 1

Chunk首先是数组

function chunkArray(array, size) {
    let result = []
    for (let i = 0; i < array.length; i += size) {
        let chunk = array.slice(i, i + size)
        result.push(chunk)
    }
    return result
}


Chunks: any = [];

loadDiretiva() {
  return this.restApi.getDiretivas().subscribe((data: {}) => {
    this.loading = true;
    this.Chunks= chunkArray(data,5);
  });
}

然后

  <tbody class="text-center ">
    <tr *ngFor="let chunk of Chunks">
      <td *ngFor="let diretiva of chunk">
        <div class="checkbox c-checkbox">
          <label>
            <input type="checkbox">
            <span class="fa fa-check"></span>
          </label>
        </div>
        <label>{{diretiva.nome}}</label>
      </td>
    </tr>
  </tbody>

我正在寻找一种使用Angular 2+将ngFor复选框拆分为tr和tds的方法

1 个答案: