angular - 如何在运行时以角度有条件地创建数据gridview？

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>