Question

我想使用ngFor显示一个数组，但在第一个元素之前，我想显示一张卡片（用户可以单击内部以显示模式）

代码在这里：

<div fxFlex="25" *ngFor="let product of products; let i = index">
    <div *ngIf="i == 0">                           
        <mat-card (click)="addProduct()" class="mat-card-add-button">
            <div fxLayout="row" fxLayoutAlign="center center" fxFlex="100%">
                <span style="font-size:32px;text-align:center">+<br />Add product</span>
            </div>
        </mat-card>
    </div>

    <div fxLayoutAlign="center stretch">
        <mat-card class="product">
            <img mat-card-image src="{{product.picture.url}}" alt="photo">
            <mat-card-title>{{product.name}}</mat-card-title>
            <mat-card-content>
                <p>
                    {{product.description}}
                </p>
            </mat-card-content>
            <mat-card-actions align="end">
            </mat-card-actions>
        </mat-card>
    </div>
</div>

此代码无效。它显示了第一个元素（我的卡）和第二个元素，如下所示：

有什么主意吗？非常感谢你！

编辑：

ngFor loop products :

first loop => my card "add product"
second loop => product A

编辑2：您将在这里找到答案：Align mat-cards content (image, text and buttons)

Answer 1

为了获得您所描述的布局，我不得不稍微调整一下代码。请参阅此stackblitz以获取工作示例。我尝试使用尽可能多的@angular/flex-layout和尽可能少的CSS。

编辑：根据注释/ follow-up question调整了堆叠闪电。在my answer中解释了有关后续问题的更改。

说明

首先，您不需要将按钮放在产品循环中。因此，您可以将结构更改为此：

<div class="container">

    <mat-card>
      <!-- your button content -->
    </mat-card>

    <mat-card>
      <!-- the loop -->
    </mat-card>

</div>

然后，您需要应用适当的flex-layout属性。

由于按钮现在不在循环中，因此您需要在容器上定义布局属性：

<div class="container" fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutGap="25px"> ... </div>

为了用相同的方式对包含按钮的垫板和包含产品的垫板进行样式设置，您的按钮和产品循环必须具有相同的宽度，可以使用fxFlex属性来定义宽度，例如：

<mat-card fxFlex="180px" ... class="product"> <!-- button content --> </mat-card>
<mat-card fxFlex="180px" ... class="product"> <!-- loop content --> </mat-card>

对于所有无法通过flex-layout定义的样式，将使用一个名为“ product”的类。

要使包含该按钮的mat-card与产品一样高，可以使用一些CSS：

.product{
  min-height: 250px;
  margin-bottom: 25px; /* same as fxLayoutGap for even distribution */

  /* additional styling */
}

请记住，如果产品卡的高度超过250像素，则使用min-height解决方案时，您的按钮可能会比产品小。

要使按钮始终与可以使用fxLayoutAlign="center stretch"而不是fxLayoutAlign="center center"的产品一样高，但是所有席卡都会根据窗口宽度而缩小和增加高度。这可能不是您想要的。

使用ngFor项目在第一个元素之前显示另一个项目

1 个答案:

说明