ngForループを2回だけに制限する方法はありますか？ 表示できるチャットウィンドウのタグは2つだけです。ngForループを2回繰り返すように制限する
<div class="chat-window-container">
<chat-window
*ngFor="let box of windows; let i = index"
[box]="box">
</chat-window>
</div>あなたは<template>を使用しない場合Array.slice(...)はそのような何かを使用することができますAngular 2: how to apply limit to *ngFor?
の重複ようだ：
<div class="chat-window-container">
<chat-window
*ngFor="let box of (windows ? windows.slice(0,2): []); let i = index"
[box]="box">
</chat-window>
</div>
EDIT：あなたは、単にそれらをよりダイナミックにするためにビットにArray.slice(...)パラメータを強化する必要が
：最後の2つのボックス（例えば：3つの以上のボックスの場合）を示しています。この方法で、最新の2つのボックスを常に表示します。例えば
<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>
ありがとうございます。 しかし、3番目のボックスを開くと、最初のボックスを置き換えることができます。私は機能が必要ですか、それともHTMLでこれを行うことができますか？ –
@Florianeあなたが尋ねたもので私の答えを更新しました:)。これはHTMLの方法ですが、コンポーネントからも行うことができます。 –
私は理由を理解できませんが、私はあなたのソリューションを.length-2関数でテストします。私は最初の2つのウィンドウを開くことができますが、別のウィンドウを開くためにクリックすると、古いウィンドウが閉じられます。 あなたはその理由を知っていますか？ –
<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>
あなたの答えは間違っています。同じ要素に2つの構造ディレクティブをバインドすることはできません。 https://angular.io/guide/structural-directives –
はい、私は答えを修正しました。 – MVG1984
本当に効率的な答えではありません。あなたが1000の要素を持ち、2を表示したいだけなら、あなたはまだ全体のコレクションをループさせます。 –
あなた自身のコンポーネントの既存のゲッターと混同したくない場合は、getterメソッドに別の名前を付けてください。
テンプレートをクリーンなコメントにする方法については、Upvote;） –
シンプルsoultion：
<div *ngFor=""let tran of transactiondata; let i=index">
<div *ngIf="i<2">
{{tran.id}}
</div>
</div>
の可能性のある重複した[2角度：？\ * ngForに制限を適用する方法]（https://stackoverflow.com/questions/36388270/angular-2 -how-to-apply-limit-to-ngfor） –