如何使用 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>