Angular 4 *ngДля добавления строки div в каждый третий столбец

Я использую Angular 4 с структурой bulma css, и мне интересно, как я могу добавить новую строку (или класс столбцов) каждый третий столбец.

Переменная индекса, которая выводит 0,1,2 0,1,2 и т. д., была, когда я смотрел на фрагмент при использовании начальной загрузки.

Заметил некоторые комментарии о том, что, возможно, я могу использовать синтаксис шаблона, но это тоже не сработало.

<div class="columns">
    <div class="column is-one-third" *ngFor="let item of items | async; let index = index">
      <app-item-details [item]='item '></app-item-details>
      {{ index % 3 }}
    <div class="is-clearfix" *ngIf="index % 3 == 0"></div>
  </div>
</div>

angular bulma ngfor
person stibay    schedule 16.08.2017    source источник
comment
Пожалуйста, укажите ожидаемый результат в вашем вопросе, потому что я не понимаю, что вы имеете в виду.   -  person n00dl3    schedule 16.08.2017
comment
Да, я заметил, что неправильно набрал *ngIf, но это для фрагмента начальной загрузки, поэтому не ожидал, что это сработает при использовании фреймворка bulma. (это тоже не помогло) Мне нужно обернуть мой результат вокруг нового класса столбцов для каждого третьего элемента в цикле.   -  person stibay    schedule 16.08.2017
comment
То же, что и здесь: stackoverflow.com/questions/27211799/, но с использованием bulma и angular 4   -  person stibay    schedule 16.08.2017

Ответы (2)


arrow_upward
4
arrow_downward

измените условие в *ngIf, как показано ниже.

*ngIf="(index + 1) % 4 == 0"

Пример плункера: https://plnkr.co/edit/C0DrgY3Rty33ZRhyML7E?p=preview

person Younis Ar M    schedule 16.08.2017
comment
Я думаю, что OP хочет добавить div через каждые 3, в вашем плункере после первой итерации строка добавляется после каждых 4. Итак, я внес некоторые изменения в ваш plunker :) - person Nehal; 16.08.2017
comment
почему плункер просто говорит loading... ?? не могу увидеть ни одного из вас, ребята, пример, отображаемый на html. Я что-то пропустил? - person Gel; 06.09.2019

arrow_upward
1
arrow_downward

Ниже решение работает для меня:

<div class="form-group">
    <div class="row">
        <div class="col-xl-4" *ngFor="let item of productimages; let index = index">
            <img [src]="item.image">
        </div>
    </div>
</div>

введите здесь описание изображения

person Abdullah    schedule 22.05.2020