Question

我有一个名为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>

但似乎你不能在HTML中做i % 10 != 0 ..任何想法？

看起来很简单，但我无法绕过它...谢谢！

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 - 它不会在结果文档中生成任何元素。

如您所见，您可以在模板中使用%。详细了解您可以在模板表达式中使用的内容here in Angular docs。

如果你想查看我编译的例子have a look at it here。

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>

注意......我没有测试任何此代码。只需键入它，如果没有调整它可能无法正常工作。

循环遍历ngFor并且如果索引mod（％）10为0则显示分隔符

2 个答案: