Question

如何将ngFor循环限制为仅2次迭代？我希望那里只有2＆＃39;聊天窗口＆＃39;可以显示的标签。

＆＃13;

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

＆＃13;

Answer 1

似乎是Angular 2: how to apply limit to *ngFor?

的副本

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

<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个框，则它将与：{/ p>相同

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

Answer 2

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

'\0'

如果您不想将其与组件中的现有getter混合使用，请给getter方法另一个名称。

Answer 3

<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>

Answer 4

简单的灵魂：

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

Answer 5

<ul *ngFor="let chat of ( window ? window.splice(0,**length**) ) ; let i = index">
    <li>{{i}}</li> //this will give index

///如果您有索引，您也可以使用*ngIf！

将ngFor循环限制为两次迭代

5 个答案: