Question

如何在ngFor中按四项拆分数组？

如何在这里显示4个项目而不是一个？

exm= ["ACA", "TTG", "CCG"]
JSON_array = {
'ATA':'I', 
'TTG':'M', 
'ATT':'O'
}

key = [val for val in JSON_array]

try:
    for val in exm:
        if val in key:
            print (JSON_array[val])
        else:
            pass
except:
    pass

Answer 1

将组件中使用的数组重组为每个包含4个元素的数组的数组。

let items = [ [1, 2, 3, 4], [5,6,7,8] ];

这是一个如何使用循环进行重组的示例：

const items = [1, 2, 3, 4, 5, 6, 7, 8];
const parentArray = [];
let childArray = [];
items.forEach(item => {
     childArray.push(item);
     if(childArray.length === 4){
          parentArray.push(childArray);
          childArray = [];
     }
});

然后在模板的第一个内嵌套另一个“ ngFor”：

<div *ngFor=“let item of parentArray”>
    <div *ngFor=“let subItem of item>
        {{ subItem }}
    </div>
</div>

这不是一个非常优雅的解决方案，但这就是您要问的。

Answer 2

您可以尝试使用（slice pipe）： TS：

export class AppComponent  {
  private itemsInRow = 4;
  // dummy array of 14 integers
  private arr = Array.from(Array(14).keys());

  itemInRowRange = Array.from(Array(this.itemsInRow).keys());
  items = of(this.arr);
}

HTML：

<div class="outer" *ngFor="let i of itemInRowRange">
  <div class="box" *ngFor="let item of items | async | slice: i*4 : i*4 + 4">
    {{item}}
  </div>
</div>

STACKBLITZ

Answer 3

组件：

public items: string[] = [
    "one",
    "twho",
    "three",
    "four",
    "five",
    "six",
    "seven",
    "eight",
    "nine",
    "ten"

]

模板：

<div *ngFor="let item of items; let i = index">
  <ng-container *ngIf="i % 4 == 0 || i == 0">
    {{items[i]}}
    {{items[i+1]}}
    {{items[i+2]}}
    {{items[i+3]}}
  </ng-container>
</div>

一般的想法是检查要迭代的数组中当前元素的索引是否为4的倍数

如何在ngFor中按四项拆分数组？

3 个答案: