如何使用 angular ionic 在 3 列网格中显示有限制的动态数据

Question

我有动态数据，在离子 angular 中以无序列表显示如下

<div *ngIf="personNameArray.length">{{'Selected People:'|translate}}</div>
              <div class="ion-margin-start" *ngIf="personNameArray.length">
                <ul>
                  <li *ngFor="let name of personNameArray">
                    {{name}}
                  </li>
                </ul>
              </div>

我需要在具有平均分布记录的 3 列网格中显示“personNameArray”数据。 我该怎么做？ 请指导。 谢谢

Answer 1

在多个列中均匀分布数组值

我创建了两种解决方案：一种是从左到右填充值，另一种是从上到下填充值。 从某种意义上说，这两种解决方案都是通用的，您只需更改numberOfColumns变量的值，UI 就会相应地进行调整。

变体 1 - 从左到右填充值

所需 Output：

'1 Tom'    | '2 Luke'  | '3 Torsten' |
'4 John'   | '5 Mike'  | '6 Emily'   |
'7 Jessica'| '8 Jacob' | '9 Madison' |
'10 Ethan' | '11 Matt' |

TS 文件：

numberOfColumns = 3; // The number of columns can be changed as desired

names: string[] = ["1 Tom", "2 Luke", "3 Torsten", "4 John", "5 Mike", "6 Emily",
                   "7 Jessica", "8 Jacob", "9 Madison", "10 Ethan", "11 Matt" ];

get gridSpecification(): string {
    return `repeat(${this.numberOfColumns}, 1fr)`;
}

HTML 文件：

<ul [style.display]="'grid'"
    [style.grid-template-columns]="gridSpecification">

    <li *ngFor="let name of names">
        {{name}}
    </li>
</ul>

---

变体 2 - 从上到下填充值

所需 Output：

'1 Tom'    | '5 Mike'    | '9 Madison' |
'2 Luke'   | '6 Emily'   | '10 Ethan'  |
'3 Torsten'| '7 Jessica' | '11 Matt'   |
'4 John'   | '8 Jacob'   |

TS 文件：

让我们以一种可以重用解决方案 1 的 html 部分的方式重新排列数组元素：

numberOfColumns = 3; // The number of columns can be changed as desired

names: string[] = ["1 Tom", "2 Luke", "3 Torsten", "4 John", "5 Mike", "6 Emily",
                   "7 Jessica", "8 Jacob", "9 Madison", "10 Ethan", "11 Matt" ];

reOrderedNames: string[] = [];

get gridSpecification(): string {
    return `repeat(${this.numberOfColumns}, 1fr)`;
}

ngOnInit(): void {
    const arrayOfBatches = this.splitIntoBatches(this.names, this.numberOfColumns);
    this.reOrderedNames = this.zip(arrayOfBatches).flat();
}

private splitIntoBatches(arr: string[], numberOfBatches: number): string[][] {
    // 'max batch size' equals 'max column length'
    const maxBatchSize = Math.ceil(arr.length / numberOfBatches);

    // 'number of batches' equals 'number of columns'
    return  Array.from({ length: numberOfBatches },
                        (_, i) => arr.slice(i * maxBatchSize, (i + 1) * maxBatchSize));
}

private zip(arr: string[][]): string[][] {
    // 'max array length' equals 'max column length'
    const maxArrayLength = Math.max(...arr.map(a => a.length));

    return Array.from({ length: maxArrayLength },
                     (_, i) => arr.filter(a => !!a[i]).map(a => a[i]));  
}

HTML 文件：

<ul [style.display]="'grid'"
    [style.grid-template-columns]="gridSpecification">

    <li *ngFor="let name of reOrderedNames">
        {{name}}
    </li>
</ul>