Angular 2 * ngFor with algorithm

Question

我有一个＆＃39;砌砖＆＃39;像我的网站上的网格，我使用* ngFor显示。 网格块如下所示：

T T T
S A S
T S T

其中T代表高大块，S代表短块，A代表高大块高的特殊区域。

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

例如：

T T T
S T S
T S T

并继续遵循格式 - ＆gt;

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

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

Answer 1

要获得所需效果，您需要利用css创建column-count。

最好的方法是使用css 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; }