dynnamicのイメージを持つAngular2タイマーurl - 式が期待される補間（{{}}）があります

Question

私は1から3までループしているタイマーを持っていて、各ループでその番号で画像をロードしたいURLに

成分画像がsignup-step1.gif、signup-step2.gifとsignup-step3.gifある資産に

import { Component, OnInit, OnDestroy} from "@angular/core"; 
    import { Observable } from 'rxjs/Observable'; 
    import { Subscription } from "rxjs"; 

    @Component({ 
     selector: 'animated-content', 
     template: require('./animated-content.template.html') 
    }) 

    export class AnimatedContentComponent implements OnInit{ 

     highlightedItem = 1; 
     private sub: Subscription; 

     constructor(){ 

     } 

     ngOnInit(){ 
      let timer = Observable.timer(1,2000); 
      this.sub = timer.subscribe(t => this.startContentCycle(t)) 
     } 

     private startContentCycle(highlightedItem) { 
      if (this.highlightedItem === 3) { 
       this.highlightedItem = 1; 
      } else { 
       this.highlightedItem++; 
      } 
     } 

    } 

テンプレート

<img [src]="/assets/signup-step{{highlightedItem}}.gif" alt="" class="img-responsive"> 

。

が、私はこのエラーを取得しています：

'Got interpolation ({{}}) where expression was expected'

Answer 1

正しい構文はこれです：

<img [src]="'/assets/signup-step' + highlightedItem + '.gif'" alt="" class="img-responsive"> 

あなたは、補間と同時に、データバインディングを使用することはできません。