Angular 7 次迭代 table

Question

我想用一个属性迭代 table 但是一行有 4 个 td，并继续这样直到结束...

我想要这样：

<table>
      <tr>
        <td>
          <mat-checkbox>1</mat-checkbox>
        </td>
        <td>
          <mat-checkbox>2</mat-checkbox>
        </td>
        <td>
          <mat-checkbox>3</mat-checkbox>
        </td>
        <td>
          <mat-checkbox>4</mat-checkbox>
        </td>
      </tr>
      <tr>
        <td>
          <mat-checkbox>5</mat-checkbox>
        </td>
        <td>
          <mat-checkbox>6</mat-checkbox>
        </td>
        <td>
          <mat-checkbox>7</mat-checkbox>
        </td>
      </tr>
    </table>

我这样试过，但它在一栏中：

lista = [
    { value: "1" },
    { value: "2" },
    { value: "3" },
    { value: "4" },
    { value: "5" },
    { value: "6" },
    { value: "7" },

<table *ngFor="let list of lista">
   <tr>
     <td>
       <mat-checkbox>{{ list.value }}</mat-checkbox>
     </td>
   </tr>
</table>

Answer 1

您可以为您的 table 使用二维数组，如下所示：

  lista = [
[
  {value: '1'},
  {value: '2'},
  {value: '3'},
  {value: '4'}
],

[
  {value: '5'},
  {value: '6'},
  {value: '7'},
  {value: '8'}
]
 ];

和 HTML

<table >
  <tr *ngFor="let row of lista">
    <td *ngFor="let col of row">
      <mat-checkbox>{{ col.value }}</mat-checkbox>
    </td>
  </tr>
</table>

Answer 2

您需要首先将数组分组为 4（块大小）组，然后在您的模板中简单地对其进行迭代。

在你的组件中：

const lista = [
    { value: "1" },
    { value: "2" },
    { value: "3" },
    { value: "4" },
    { value: "5" },
    { value: "6" },
    { value: "7" }
];

const chunkSize = 4;

// Group in chunks of 4 and take only truthy values
const groups = lista
.map((x, index) => { 
     return index % chunkSize === 0 ? lista.slice(index, index + chunkSize): null; 
})
.filter(x => x);

在您的模板中：

<table >
   <tr *ngFor="let item of groups">
     <td *ngFor = "let innerItem of item">
       <mat-checkbox>{{ innerItem.value }}</mat-checkbox>
     </td>
   </tr>
</table>

Angular 7 次迭代 table

Angular 7 iterate table

javascript

loops

typescript

angular-template

angular