Angular 2 * ngFor with algorithm

时间:2017-03-13 08:53:29

标签: algorithm angular ngfor

我有一个'砌砖'像我的网站上的网格,我使用* 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

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

1 个答案:

答案 0 :(得分:1)

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

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

此示例利用enter image description here提供一个对象,其中键是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; }