将 ngFor 循环限制为两次迭代

Posted 2023-02-22

【中文标题】将 ngFor 循环限制为两次迭代

【英文标题】：Limit the ngFor loop to two iterations

【发布时间】：2017-12-27 05:21:46

【问题描述】：

如何将 ngFor 循环限制为 2 次迭代？ 我希望只有 2 个“聊天窗口”标签可以显示。

<div class="chat-window-container">
    <chat-window
            *ngFor="let box of windows; let i = index"
            [box]="box">
    </chat-window>
</div>

【问题讨论】：

Angular 2: how to apply limit to *ngFor?的可能重复

【参考方案1】：

似乎与 Angular 2: how to apply limit to *ngFor? 重复

如果你不想使用<template>，你可以使用Array.slice(...)做类似的事情：

<div class="chat-window-container">
    <chat-window
            *ngFor="let box of (windows ? windows.slice(0,2): []); let i = index"
            [box]="box">
    </chat-window>
</div>

编辑：显示最后两个框（例如：如果有 3 个或更多框）：

您只需稍微增强Array.slice(...) 参数即可使其更具动态性。这样，您将始终显示两个最新的框。

<div class="chat-window-container">
    <chat-window
            *ngFor="let box of (windows ? windows.slice(windows.length-2,2): []); let i = index"
            [box]="box">
    </chat-window>
</div>

例如，如果您在windows 中有 4 个框，则相同：

<div class="chat-window-container">
    <chat-window
            *ngFor="let box of (windows ? windows.slice(2,2): []); let i = index"
            [box]="box">
    </chat-window>
</div>

【讨论】：

谢谢它有效。但是，当我打开第三个盒子时，我希望这个盒子取代第一个盒子。我需要一个函数还是我可以在 html 中做到这一点？

@Floriane 我刚刚用你的要求更新了我的答案:)。这是一种 HTML 方式，但您也可以从您的组件中执行此操作。

我不明白为什么，但是当我使用 .length-2 函数测试您的解决方案时。我可以打开前两个窗口，但是当我单击打开另一个窗口时，它会关闭旧窗口。你知道为什么吗？

@Floriane 我需要更多代码才能真正理解您遇到的行为。

好的，我创建了一个新问题来更好地解释我的问题。 '打开最后 2 个讨论窗口' 非常感谢！

【参考方案2】：

您还可以尝试保持模板不被切片，并在组件本身中准备数据：

public get windows(): Window[] 
    return this.windows.slice(0,2);

如果您不想将它与组件中现有的 getter 混淆，或者给 getter 方法取另一个名称。

【讨论】：

支持如何保持模板干净的评论；)

【参考方案3】：

简单的灵魂：

<div *ngFor=""let tran of transactiondata;  let i=index">
    <div *ngIf="i<2">
        tran.id
    </div>
</div>

【参考方案4】：

<div class="chat-window-container">
    <template *ngFor="let box of windows; let i = index">
        <chat-window [box]="box" *ngIf="i < 2">
        </chat-window>
    </template>
</div>

【讨论】：

你的答案是错误的，你不能将两个结构指令绑定到同一个元素。 angular.io/guide/structural-directives

不是一个真正有效的答案，考虑到如果你有 1000 个元素并且你只想显示 2 个，你仍然会循环整个集合