角度4のCSSスタイルを連続してループします。

Question

ウェブサイトの背景用に「スクリーンセーバー」を作成するために、遅延を伴うバックグラウンドURLの配列を連続的にループしようとしています。

現在、私の.tsファイルに配列があり、HTMLにNgForディレクティブを使用しています。問題は、画像内のスイッチ（最後に表示されるものが最後のもの）と、アレイを通る連続ループではないということです。 .TSで

：

<div *ngFor="let bgImg of bgImgs"> 
    <div [style.backgroundImage]="bgImg" id="home" class="pt-5"> 

Answer 1

あり、これを行うのがより "rxjs" 方法であるが、ここでは一つの方法だかもしれません：

の.htmlで

bgImgs = [ 
`url("/assets/img/friendship.jpeg")`, 
`url("/assets/img/family.jpeg")`, 
`url("/assets/img/health.jpeg")`, 
`url("/assets/img/fatherson2.jpeg")` 

]

export class App implements OnInit { 
    private imageUrls: string[]; 
    private current: number = 0; 
    currentImage: string; 
    constructor() { 
    this.imageUrls = [ 
     '//placehold.it/1280x720.jpg', 
     '//placehold.it/1280x721.jpg', 
     '//placehold.it/1280x722.jpg', 
     '//placehold.it/1280x723.jpg' 
    ]; 
    this.currentImage = this.imageUrls[0] 
    } 
    ngOnInit() { 

    // Every second... 
    Observable.interval(1000) 
    .subscribe(x => { 
     this.currentImage = `url(${this.imageUrls[this.current]})`; 

     // Reset current to 0 if we're at the end of the array 
     this.current == this.imageUrls.length - 1 ? (this.current = 0) : ++this.current; 
    }) 
    } 
} 

ファイヤー他のトランジションをもう少し足回しが必要です。

Plunk