使用 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：你会在这里找到答案：

Answer 1

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

编辑：根据后续问题的评论/. The changes are explained within 调整了 stackblitz。

说明

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

<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”的 class。

要使包含按钮的 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" 的产品一样高，但所有垫卡的高度都会根据 window 收缩和增长宽度。这可能不是你想要的。

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

Use ngFor items to display another item before the first element

css

angular

angular-material2

ngfor

angular-flex-layout

说明