[英]angular2 bootstrap dynamic carousel
我有一个来自json
的动态图像,并执行*ngFor
循环遍历*ngFor
,并使用bootstrap轮播将其放入轮播中,但是我想在*ngFor
内放置一个readmore链接,以便每个项目都具有更多的了解。
当用户单击“ 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>
我的尝试是我认为然后需要执行for循环,我在json数据中总共有5个项目。
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结构
您需要在循环内部具有索引,以使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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.