使用 ngFor items 在第一个元素之前显示另一个项目 [英] Use ngFor items to display another item before the first element

问题描述

我想使用 ngFor 显示一个数组，但在第一个元素之前我想显示一张卡片(用户可以点击里面显示一个模式)

代码如下:

<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/>添加产品</span>
</mat-card>

<div fxLayoutAlign="中心拉伸"><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>{{产品描述}}</p></mat-card-content><mat-card-actions align="end"></mat-card-actions></mat-card>

此代码不起作用.它显示第一个元素(我的卡片)和第二个元素，如下所示:

有什么想法吗?非常感谢！

ngFor 循环产品:第一个循环 =>我的卡添加产品"第二个循环 =>产品A

编辑 2 :你会在这里找到答案:对齐垫卡内容(图像、文本和按钮)

解决方案

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

根据评论/后续问题调整了stackblitz.在我对后续问题的回答中解释了这些变化.

说明

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

<垫卡><!-- 您的按钮内容--></mat-card><垫卡><!-- 循环--></mat-card>

然后你需要应用适当的 flex-layout 属性.

由于按钮现在在循环外，需要在容器上定义布局属性:

... </div>

为了将包含按钮的 mat-card 与包含产品的 mat-card 样式相同，您的按钮和产品循环需要具有相同的宽度，可以使用 fxFlex 属性，例如:

<!-- 按钮内容--></mat-card><mat-card fxFlex="180px";...类=产品"><!-- 循环内容--></mat-card>

对于不能由 flex-layout 定义的所有样式，都可以使用名为product"的类.将被使用.

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

.product{最小高度:250px；底边距:25px；/* 与 fxLayoutGap 相同，用于均匀分布 *//* 附加样式 */}

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

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

I would like to display an array using ngFor but before the first element I want to display a card (the user can click inside to show a modal)

Here the code :

<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>

This code doesn't work. It shows the first element (my card) and the second element like this :

Any idea ? Thank you very much !

EDIT :

ngFor loop products :

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

EDIT 2 : You'll find the answer to this here : Align mat-cards content (image, text and buttons)

解决方案

In order to get the layout you described I had to adjust your code a little bit. Please refer to this stackblitz for a working example. I've tried to use as much @angular/flex-layout and as little CSS as possible.

EDIT: adjusted the stackblitz according to the comment / follow-up question. The changes are explained within my answer to the follow-up question.

Explanation

First of all you don't need to place your button inside the loop of the products. Therefore you can change the structure to this:

<div class="container">

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

</div>

Then you need to apply the proper flex-layout attributes.

Since the button is outside the loop now, you need to define the layout attributes on the container:

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

In order to style the mat-card containing the button the same way as the mat-cards containing the products your button and your product loop need to have the same width which can be defined by using the fxFlex attribute, e.g.:

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

For all styling which can't be defined by the flex-layout a class called "product" will be used.

To make the mat-card containing the button as high as the products some CSS can be used:

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

Keep in mind that if you use the min-height solution your button might be smaller as the products if the height of the product cards exceed 250px.

To always have the button be as high as the products you could use fxLayoutAlign="center stretch" instead of fxLayoutAlign="center center" but all mat-cards will shrink and grow in height depending on the window width. This might not be what you want.

这篇关于使用 ngFor items 在第一个元素之前显示另一个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！