Используйте элементы ngFor для отображения другого элемента перед первым элементом - PullRequest
Новая
       32

Используйте элементы ngFor для отображения другого элемента перед первым элементом

0 голосов
/ 06 сентября 2018

Я хотел бы отобразить массив с помощью ngFor, но перед первым элементом я хочу отобразить карточку (пользователь может щелкнуть внутри, чтобы показать модальный режим)

enter image description here

Вот код: 

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

Этот код не работает. Он показывает первый элемент (мою карту) и второй элемент следующим образом:

enter image description here

Есть идеи? Большое спасибо!

РЕДАКТИРОВАТЬ: 

ngFor loop products :

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

РЕДАКТИРОВАТЬ 2: Вы найдете ответ на этот вопрос здесь: Выровнять содержимое карточек (изображение, текст и кнопки)

1 Ответ

0 голосов
/ 06 сентября 2018

Чтобы получить макет, который вы описали, мне пришлось немного подкорректировать ваш код. Пожалуйста, обратитесь к этому stackblitz для рабочего примера. Я пытался использовать как можно больше @angular/flex-layout и как можно меньше CSS.

РЕДАКТИРОВАТЬ: скорректировать стек в соответствии с комментарием / следующий вопрос . Изменения объясняются в моем ответе на последующий вопрос.

Объяснение

Прежде всего вам не нужно размещать кнопку внутри цикла продуктов. Поэтому вы можете изменить структуру следующим образом: 

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

Имейте в виду, что если вы используете решение min-height, ваша кнопка может быть меньше, чем продукты, если высота карточек продуктов превышает 250px.

Чтобы кнопка всегда была такой же высокой, как у продуктов, которые вы могли бы использовать fxLayoutAlign="center stretch" вместо fxLayoutAlign="center center", но все мат-карты будут уменьшаться и увеличиваться по высоте в зависимости от ширины окна. Это может быть не то, что вы хотите.

...