Как создать условное представление сетки данных во время выполнения в angular?

Question

Я хочу представить ODF(оптическую распределительную рамку) как gridView в угловом, скажем, у нас есть 24 порта ODF

export class TestComponent implements OnInit {
  constructor(private bbService: BackboneService) {}
  ports: any[] = [];
  ngOnInit(): void {
    this.bbService.getODFs().subscribe((data) => {
      console.log(data);
      this.ports = JSON.parse(data[0].ports);
    });
  }
}

внутри компонента html

<table>

// if the port number reaches 12 it goes to next row
  <tr>
    <td *ngFor="let port of ports">port.number</td>
  <tr/
</table

Выход будет такой:

01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |

таблица ядер

Answer 1

Вы можете создать многомерный массив, если вы получаете данные от вызова API в массиве портов в следующем формате

port = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12',
    '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22'];

отформатируйте указанный выше массив в многомерный массив, как показано ниже

multiDimensionalArray=[];

функция для создания многомерного массива, когда номер порта достигает 12 следующим образом

private createMultiDimensionalArray() {
    this.multiDimensionalArray[0] = [];
    let temp = [];
    for (let i = 0; i < this.port.length; i++) {
      const element = this.port[i];
      temp.push(element);
      if ((i + 1) % 12 == 0) {
        let j = 0;

        this.multiDimensionalArray[j].push(temp);
        temp = [];

      }
    }

  }

В HTML вы можете использовать следующий код

<table>
  <ng-template ngFor let-item [ngForOf]="multiDimensionalArray " let-i="index">
    <tr *ngFor="let record of item">
      <td *ngFor="let num of record">
        {{num|json}}
      </td>
    </tr>
  </ng-template>

</table>