Question

我有一个从1 - 3循环的计时器，在每个循环中我想使用该数字在网址中加载带有该数字的图像。

组件

    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。

我收到此错误：

＆＃39;插值（{{}}）表达式是预期的＆＃39;

Answer 1

正确的语法是：

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

您无法同时使用插值和数据绑定。

具有动态图像url的Angular2计时器 - 得到插值（{{}}），其中表达式是预期的

1 个答案: