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

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 调整了 stackblitz。更改在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>

为了使包含按钮的 mat-card 的样式与包含产品的 mat-card 的样式相同，您的按钮和产品循环需要具有相同的宽度，这可以通过使用 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 */
}

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

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