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

问题描述

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

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)

代码在这里:

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

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)

推荐答案

为了获得您所描述的布局，我必须对代码进行一些调整.请参阅此 stackblitz 来获取工作示例.我尝试使用尽可能多的@angular/flex-layout和尽可能少的CSS.

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.

根据评论/后续问题调整了堆栈闪电.有关更改的内容，请参见我对后续问题的回答.

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

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

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>

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

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>

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

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>

对于所有无法通过flex-layout定义的样式，将使用一个称为产品"的类.

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

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

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 */
}

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

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.

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

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项目在第一个元素之前显示另一个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！