Filling a Carousel from a Service

Expected behavior I am consuming a service that returns an array of three objects (limited, observables) from which I would like to create slides in a carousel.

Actual behavior It looks like it puts all three slides into a "pile" of one (text is overwritten)

Resources (screenshots, code snippets etc.) I know that this is how we create a slide:

  <div class="carousel-item active">
    <img class="d-block w-100" src="http://placehold.it/800x300">
    <div class="carousel-caption d-none d-md-block">
      <h5>First slide label</h5>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
   </div>

I've added the *ngFor-Statement to produce a loop:

<div *ngFor="let teaser of hashtagsTeaser" class="carousel-item active">
    <img class="d-block w-100" src="http://placehold.it/800x300">
    <div class="carousel-caption d-none d-md-block">
      <h5>{{teaser.primaryHashtag}}</h5>
      <p>{{teaser.htCount}} Artikel in {{teaser.primaryHashtag}}</p>
    </div>
   </div>

I'm totally new to this, so any help is apreciated ;-)