angular2 самонастройки динамической карусели

Question

У меня есть динамические образа приходят из json и делать *ngFor к петле через OBJS и положить его в каруселью с использованием начальной загрузки карусели, но я хочу, чтобы поставить ссылку ЧИТАТЬ внутри *ngFor поэтому каждый элемент будет иметь читать дальше.

Я не могу понять, как это сделать, когда пользователь нажимает «readmore», он будет прокручивать его относительный элемент, отображающий изображение, если это имеет смысл.

<div class="col-sm-4" *ngFor="let journey of Journey"> 
    <div class="journey_block"> 
    <div class="icon-workflow"> 
     <div class="view view-fourth"> 
     <img src="{{ journey.imageName }}" alt=""> 
     <div class="mask"> 
      <a href="" class="info" data-target="#carousel-example-generic" data-slide-to="0">Read More</a> 
     </div> 
     </div> 
     <h4 class="journey_title"> 
     <a [href]="journey.journey_url" *ngIf="journey.journey_url != 'javascript:;' " class="float-shadow"> 
      {{journey.title}} 
     </a> 
     </h4> 
    </div> 
</div> 

Моя попытка я думал, что после этого нужно сделать цикл, у меня есть 5 пунктов в общей сложности в данных JSON.

getImg() { 
    this.http.get('./journey.json') 
    .map((res:Response) => res.json()) 
    .subscribe(data => { 
     if(data) { 
      var jsonObj = JSON.parse(JSON.stringify(data)); 
      this.Journey = jsonObj.journey; 

      for (var i = 0; i < this.Journey.length; i++) { 
       var element = this.Journey[i]; 
       this.objCount = element; 
       console.log(this.objCount); 
      } 
     } 

    }); 
}; 

Посмотреть полный HTML структура каруселью

Carousel structure

Answer 1

Вы должны иметь индекс внутри петли для делая data-slide-to атрибут уникальным. Это можно сделать с помощью предопределенного значения Angular2 index.

Пример

<!-- Angular 2.0 --> 
<ul> 
    <li *ngFor="let item of items; let i = index"> 
    {{i}} {{item}} 
    </li> 
</ul> 

В коде:

<div class="col-sm-4" *ngFor="let journey of Journey; let i = index"> 
    <div class="journey_block"> 
     <div class="icon-workflow"> 
      <div class="view view-fourth"> 
      <img src="{{ journey.imageName }}" alt=""> 
      <div class="mask"> 
       <a href="" class="info" data-target="#carousel-example-generic" [attr.data-slide-to]="i">Read More</a> 
      </div> 
      </div> 
      <h4 class="journey_title"> 
      <a [href]="journey.journey_url" *ngIf="journey.journey_url != 'javascript:;' " class="float-shadow"> 
       {{journey.title}} 
      </a> 
      </h4> 
     </div> 
    </div>