Цикл по ngFor и если индекс mod (%) 10 равен 0, показать разделитель

Question

У меня есть компонент с именем post, и я зацикливаюсь на нем, чтобы показать все сообщения в массиве.

То, что я хотел бы сделать, это отделить пост, чтобы после каждого десятого поста он показывал «разделитель страниц», что-то, что просто говорит Page X. Так вроде:

post
post
...
post #10
-- Page 2 --
post
post
...
post #20
-- Page 3 --

Вот мой HTML:

<post *ngFor="let post of postFeed.reverse()" [postData]="post"></post>
<div *ngFor="let post of postFeed.reverse(); let i = index" [hidden]="i % 10 != 0" class="pageIndicator">
  <div class="pageNumb">Page {{(i/10)+1}}</div>
</div>

но кажется, что вы не можете сделать i % 10 != 0 внутри HTML ... есть идеи?

Кажется, это было бы просто, но я не могу обернуть голову вокруг этого .. Спасибо!

Answer 1

Есть несколько проблем с кодом.

Прежде всего, вы звоните reverse() дважды в своем шаблоне. Метод reverse мутирует исходный массив, так что вы фактически полностью изменяете то, что вы изменили, - не уверен, что это то, что вы хотели.

Во-вторых, код вашего шаблона может привести только к непрерывному списку постов с отображаемыми индикаторами страниц в конце, потому что вы сначала просматриваете массив и генерируете посты, и только после последней итерации эти индикаторы страниц начинают итерироваться и генерироваться.

Вы можете выбрать более простой подход в своем шаблоне - придумайте один элемент контейнера, для которого будет выполняться итерация *ngFor, а внутри сообщений будут случайные индикаторы страниц .

<div *ngFor="let post of postFeed; let i = index">
  <post [postData]="post"></post>
  <div class="post-indicator" *ngIf="i > 0 && i % 10 == 0">
    Page {{i / 10 + 1}}
  </div>
</div>

Если вы не хотите использовать дополнительную упаковку div, используйте ng-container - в результирующем документе не будет сгенерировано никаких элементов.

Как видите, вы можете использовать % в своих шаблонах. Подробнее о том, что вы можете использовать в шаблонных выражениях здесь, в Angular docs .

Если вы хотите увидеть пример, который я скомпилировал, посмотрите здесь .

Answer 2

Вы можете попробовать добавить функцию к вашему компоненту, которая проверяет mod = 0, и использовать * ngIf для отображения результата

Ваш компонент будет выглядеть примерно так:

isPageBreak(index) {
    if (index > 0 && index % 10 === 0) {
        return true;
    }
    return false;
}

и тогда ваш взгляд будет выглядеть примерно так:

<div *ngFor="let post of postFeed.reverse(); let i = index">
  <post [postData]="post"></post>
  <div *ngIf="isPageBreak(i)" class="pageIndicator">
    <div class="pageNumb">Page {{(i/10)+1}}</div>
  </div>
</div>

Примечание ... Я не тестировал этот код. Просто набрал его, чтобы он не работал без настроек.