Can ngfor output the array in pairs?

suppose an array is like this

    qq = [
      {
        "test":[
          
                    [
                  "",
                  "321"
                ],
                [
                  "",
                  "123"
                ],
                [
                  "",
                  "111"
                ],
                [
                  "",
                  "222"
                ],
            
        ]

      }

];
    

so today when I use ngfor to output

  <ng-container *ngFor="let item of qq; let i = index">
       <div *ngFor="let test of item["test"]; let idx = index;">

            {{test[0]}}
            {{test[1]}}

        </div>
     </ng-container>

HTML structure will be

    <div>  321</div>
    <div>  123</div>
    <div>  111</div>
    <div>  222</div>

but what I want to do today is a structure like this

<div>  321   123</div>
<div>  111  222</div>

is there a way to achieve this?

attach the code:
https://stackblitz.com/edit/a...

Apr.15,2022

my idea is to change the data structure and put

[
  {
    "test":[
      [
        "",
        "321"
      ],
      [
        "",
        "123"
      ],
      [
        "",
        "111"
      ],
      [
        "",
        "222"
      ]
    ]
  }
]

change to:

[
  {
    test: [
      [
        [
          "",
          "321"
        ],
        [
          "",
          "123"
        ]
      ],
      [
        [
          "",
          "111"
        ],
        [
          "",
          "222"
        ]
      ]
    ]
  }
]

the conversion function is as follows:

let data = [
  {
    "test":[
      [
        "",
        "321"
      ],
      [
        "",
        "123"
      ],
      [
        "",
        "111"
      ],
      [
        "",
        "222"
      ]
    ]
  }
]

let result = data.map(item => {
  let test = item.test.reduce((sum, cur, index) => {
    if (index % 2) {
      sum[sum.length - 1].push(cur)
    } else {
      sum.push([cur])
    }
    return sum
  }, [])
  return Object.assign({}, item, {test})
})

then modify the app.component.html file:

clipboard.png

app.components.ts:

clipboard.png


<ng-container *ngFor="let item of qq; let i = index">
       <div *ngFor="let v of new Array(item['test'].length/2); let idx = index;">

            {{item['test'][idx]}}
            {{item['test'][idx + 1]}}

        </div>
     </ng-container>

guarantee that item ['test'] .length is an integral multiple of 2.

Menu