Question

当使用索引局部变量显示最后一条注释时，我正在尝试显示一个“loadmore”按钮，但默认情况下，此变量的范围限定为ngFor指令。

可以在上下文之外公开它吗？

<div *ngFor="let comment of comments; let i = index">
    <comment></comment>
</div>

<div *ngIf="comments.length === i"> <!-- The i variable is unknown -->
    <button>Load more comments</button>
</div>

Answer 1

显示＆＃34;加载更多＆＃34;链接总是在评论列表下。

这是标准方式。当用户滚动到最后一条评论下方时，该链接将可见;不需要* ngIf。

组件HTML：

<div *ngFor="let comment of comments">
    <comment></comment>
</div>
<button (click)="loadMoreComments()">Load more comments</button>

组件TS：

loadMoreComments() {
    let offset = comments.length;
    // Request more comments starting from offset
}

混合滚动

如果你想结合自动无限滚动并让用户找到页脚，你可以像在网上一样做。他们要求您点击＆＃34;加载更多＆＃34;一次，但之后，每当用户向下滚动足以使其变得可见时，它就会自动触发。在第一次按下按钮之前，页脚可以访问。

示例：https://www.instagram.com/soturidesign/

在上下文之外访问ngFor局部变量

1 个答案: