ngfor能将数组两个一组输出?

Question

假设一个数组是这样

    qq = [
      {
        "test":[
          
                    [
                  "廣州隊",
                  "321"
                ],
                [
                  "北京隊",
                  "123"
                ],
                [
                  "成都隊",
                  "111"
                ],
                [
                  "上海隊",
                  "222"
                ],
            
        ]

      }

];
    

那么今天当我用ngfor输出

  <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结构会是

    <div> 廣州隊 321</div>
    <div> 北京隊 123</div>
    <div> 成都隊 111</div>
    <div> 上海隊 222</div>

可是今天我想做的是这样子的结构

<div> 廣州隊 321  北京隊 123</div>
<div> 成都隊 111 上海隊 222</div>

这有办法实现吗?

附上代码:
https://stackblitz.com/edit/a...

Answer 1

我的思路是改变数据结构，把

[
  {
    "test":[
      [
        "廣州隊",
        "321"
      ],
      [
        "北京隊",
        "123"
      ],
      [
        "成都隊",
        "111"
      ],
      [
        "上海隊",
        "222"
      ]
    ]
  }
]

改为：

[
  {
    test: [
      [
        [
          "廣州隊",
          "321"
        ],
        [
          "北京隊",
          "123"
        ]
      ],
      [
        [
          "成都隊",
          "111"
        ],
        [
          "上海隊",
          "222"
        ]
      ]
    ]
  }
]

转化函数如下：

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})
})

然后修改app.component.html文件：

app.components.ts文件的内容截图如下：

Answer 2

<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>

自己保证item['test'].length是2的整数倍。