Javascript 循环ngFor，如果索引mod（%）10为0，则显示分隔符

我有一个名为

post

的组件，我在其中循环以显示数组中的所有post

我想做的是将文章分开，这样在每10篇文章之后，它都会显示一个“页面分隔符”，它只是说

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）+1}页

但似乎您无法执行

i%10！=HTML中的0

。。有什么想法吗

---

这似乎很简单，但我不能把我的头绕在它周围。。谢谢

您可以尝试向组件添加一个检查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>

然后你的观点会是这样的：

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>

第{（i/10）+1}页

---

注意。。。我没有测试任何代码。只需输入它，因此如果不进行调整，它可能无法工作。

代码有几个问题

首先，您在模板中调用了两次

reverse（）

。

reverse

方法会对原始数组进行变异，因此实际上可以反转已反转的数组-不确定这是否是您想要的

其次，模板代码只能生成不间断的文章列表，最后显示页面指示符，因为您首先迭代数组并生成文章，只有在最后一次迭代之后，这些页面指示符才会开始迭代并生成

您可以在模板中选择更简单的方法-提出一个容器元素，在该元素上将进行

*ngFor

迭代，并且帖子内部将偶尔带有页面指示器

第{i/10+1}页

如果您不想使用额外的包装

div

，请使用

ng container

-它不会在结果文档中生成任何元素

如您所见，您可以在模板中使用

%

。有关可以在模板表达式中使用的内容的详细信息

---

如果您想查看我编译的示例，.

代码看起来不错-11、21、31。。。。邮政应该是一个独立的？这工作的伟大。我最终使用了

ng container

，并且我还必须在

元素之前放置

post指示器，因为它显示了前11个post。不过答案很好