Question

在遍历数据集时如何添加新行。

<div fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutWrap *ngIf="blogs; else loading;">
        <div fxFlex="50" fxFlex.sm="100" fxFlex.xs="100" class="article_card" *ngFor="let blog of blogs">
            <mat-card class="example-card">
                <img mat-card-image src="{{blog.image_1}}" class="article_image">
                <mat-card-content>
                    <h1 class="article_header">{{blog.title}}</h1>
                    <p class="article_caption">
                        {{blog.caption}}
                    </p>
                    <span class="article_date">{{blog.created}}, </span><span class="article_read_time">{{blog.read_time}} read</span>
                </mat-card-content>
            </mat-card>
        </div>
    </div>

理想的布局是在大和中视图中使用2张卡片，而在小视图和超小视图中有1张卡片占据整个宽度。

Answer 1

这是我如何实现所需的布局：

<div fxLayout="row wrap" fxLayout.lt-sm="column" fxLayoutGap="15px" fxLayoutAlign=”flex-start” *ngIf="blogs; else loading;">
        <ng-container *ngFor="let blog of blogs">
            <mat-card fxFlex="0 1 calc(50% - 32px)" class="card_item" fxFlex.lt-sm="100%">
                <img mat-card-image src="{{blog.image_1}}" class="article_image">
                <mat-card-content>
                    <h1 class="article_header">{{blog.title}}</h1>
                    <p class="article_caption">
                        {{blog.caption}}
                    </p>
                    <span class="article_date">{{blog.created}}, </span><span class="article_read_time">{{blog.read_time}} read</span>
                </mat-card-content>
            </mat-card>
        </ng-container>
    </div>

有关更多信息，请查看这篇文章：AG-GRID: THE BEST HTML5 GRID IN THE WORLD

如何在Angular Flex-box上添加新行

1 个答案: