Angular 2 *ngFor 算法

Question

我的网站上有一个类似于 'masonry' 的网格，我使用 *ngFor 显示它。网格块如下所示：

T T T
S A S
T S T

其中 T - 代表高块，S - 短块，A - 具有高块高度的特殊部分。

我正在尝试创建一个网格，该网格将使用 ngFor 但使用网格模式自动填充。

例如：

T T T
S T S
T S T

并继续遵循格式 ->

T T T
S T S
T S T
T T T
S T S
T S T
T T T
S T S
T S T

以此类推，以前三行为例，高矮块仅由class指定。所以我的问题是，检查所有这些条件以便以下列格式显示它们的最佳方法是什么？

Answer 1

要获得您想要的效果，您需要利用 css 来创建 masonry layout。

最好的方法是使用 css column-count，但您需要转置数组，以便数据的每一行代表一列。

此示例利用 ngClass 提供一个对象，其中的键是 CSS 类，当值中给定的表达式的计算结果为 true 时添加这些键。

masonry.component.ts

export class MasonryComponent {
    wall = [['T', 'T', 'T'], ['S', 'A', 'S'], ['T', 'S', 'T']];

    constructor() { }

    transpose(arr: any[]){
        return arr.map((col, i) => arr.map((row)  => row[i] ));
    }
}

masonry.html

<div class="wall" >
    <ng-container *ngFor="let blockCol of transpose(wall)">
        <div *ngFor="let block of blockCol" class="block" [ngClass]="{ 
            'tall' : block === 'T', 
            'short': block === 'S', 
            'special': block === 'A'  }">{{ block }}</div>
    </ng-container>
</div>

masonry.css

.wall {
    width: 170px;
    column-count: 3;
}

.block {
    width: 50px;
    border: 1px solid black;
}

.tall {     height: 50px; }
.special {  height: 50px; }
.short {    height: 25px; }

Angular 2 *ngFor 算法

Angular 2 *ngFor with algorithm

algorithm

ngfor

angular