带有dynnamic映像URL的Angular2计时器 - 获得了预期表达式的插值({{}})

Question

我有一个计时器，该计时器从1-3循环，在每个循环上，我想使用该号码将图像加载在URL中。

组件

    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">

在资产中，图像为 signup-step1.gif， signup-step2.gif和 signup-step3.gif。

我遇到了这个错误：

'获得了预期表达式的插值({{}}('

Answer 1

正确的语法是：

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

您不能同时使用插值和数据绑定。