angular - 从头开始使用 Angular 2 的旋转木马/ slider

Question

我正在尝试使用 Angular 2 编写轮播/ slider 代码。我的想法是，我有一组图像，

export class AppComponent {
  title = 'app works!';

  images: Array<any> = [
    {
      image: "1.jpg"
    },
    {
      image: "2.jpg"
    },
    {
      image: "3.jpg"
    },
    {
      image: "4.jpg"
    },
    {
      image: "5.jpg"
    },
    {
      image: "6.jpg"
    }
  ];
}

我想遍历图像数组并将 div 的背景图像替换为 {{images.image}} 的当前值。

我设置了一个计数器，

public subscription: any;
public time: any;
ngOnInit() {
  let timer = TimerObservable.create(1000,5000);
  this.subscription = timer.subscribe(t=>{
    this.time = t;
  })
}

目标div看起来像

<div class="slider__home" style="background: url({{image}})">

</div>

我如何实现这一点？我不想使用 bootstrap 或 jQuery，而只是普通的 Angular2，感谢您的帮助。

Answer 1

像这样:

<div class="slider__home" [style.background]="'url('+ image +')'">

</div>