Firebaseデータをマーキーに入れる方法

Question

私のfirebaseデータベースには、各ノードの文字列を持つツリーがあります。

informations 
|----- info 1 
|----- info 2 
|----- info 3 

私のHTMLでは、「ニュースフィード」のようなものを作成するために、各情報をマーキーに表示したいと思います。 私は自分の情報を正しく取得しました。問題は、データベースにある各情報のマーキーを動作させる方法です。 私のマーキーテンプレートが（正しく動作する）である。

<div class="marquee"> 
    <div> 
    <span>Information 1</span> 
    <span>Information 2</span> 
    </div> 
</div> 

.marquee { 
    height: 25px; 
    width: 420px; 

    overflow: hidden; 
    position: relative; 
} 

.marquee div { 
    display: block; 
    width: 200%; 
    height: 30px; 

    position: absolute; 
    overflow: hidden; 

    animation: marquee 5s linear infinite; 
} 

.marquee span { 
    float: left; 
    width: 50%; 
} 

@keyframes marquee { 
    0% { left: 0; } 
    100% { left: -100%; } 
} 

私の問題は私のデータベースからデータを取得* ngForを置く場所です。私のマーキーのトライコードの

1：

<div class="marquee" *ngFor="let d of descriptions"> 
     <div> 
     <span >"{{d.text}}" - {{d.user}}</span> 
     </div> 
    </div> 

しかし、このコードで、マーキーはすべての私の情報が含まれている、とだけでなく、一度に一つ！

私のデータベースの各情報を1つの行に順番に表示するマーキーを使用するにはどうすればよいですか？この例のショーのようにhttps://codepen.io/anon/pen/wpBrLv

私は私の問題を正直に説明できたらいいと思う！

Answer 1

このコード

<div class="marquee" > 
    <div> 
    <span *ngFor="let d of descriptions">"{{d.text}}" - {{d.user}}</span> 
    </div> 

を試してみてください

CSS

@keyframes marquee { 
    0% { left: 100%; } 
    100% { left: -100%; } 
}