Question

我有一个简单的应用程序，允许用户在开始时选择木瓦。然后，他们将获得升级该瓦的选项。在升级页面上，当选择了已升级的木瓦时，木瓦映像应更新。

在升级页面上，它们在图像中显示其当前的瓦片。

<img style="width:15em; height:15em;" 
src="../../assets/shingles/{{upgradeShingle}}.jpg" />

我有一个带有可用升级的滑块。

<p-slider class="col-sm-1" [(ngModel)]="upgradeShingle" (onChange)="handleChangeShingle($event)" [min]="val2" [max]="13" [step]="1" orientation="vertical" [style]="{'height':'30em'}"></p-slider>

这是onChange事件代码：

handleChangeShingle(e) {
    this.upgradeShingle = e.value;
    console.log(this.upgradeShingle);
    if (this.upgradeShingle = this.currentShingle.shingleID) {
        this.shingleChanged = false;
    }else{ this.shingleChanged = true; }
}

如您所见，src标记具有一个名为upgradeShingle的Angular变量的插值，并且滑块具有对该相同变量的绑定。在页面初始化上，效果很好。但是，如果我移动滑块并且触发了onChange事件，它将更新绑定变量，但是图像不会相应更新。我想念什么？

Answer 1

它可以使用以下任何语法：

src="../../assets/shingles/{{upgradeShingle}}.jpg"
src="{{ '../../assets/shingles/' + upgradeShingle + '.jpg' }}"
[src]="'../../assets/shingles/' + upgradeShingle + '.jpg'"

有关演示，请参见this stackblitz。

此外，请确保在if语句中使用comparison operator而不是assignment operator。换句话说，将=替换为==或===：

if (this.upgradeShingle === this.currentShingle.shingleID) {

或用以下语句替换if条件：

this.shingleChanged = this.upgradeShingle !== this.currentShingle.shingleID;

Answer 2

未触发浏览器重新下载图像。 Here is an answer from SO about forcing redownload。我已经（大致）将其应用于您的问题。

<img src="['../../assets/shingles/' + upgradeShingle + '.jpg' + 'new Date().getTime()']" />

这将在您处于当前状态时自动附加当前时间戳创建图像，它将使浏览器再次寻找图片，而不是检索缓存中的图片。

Answer 3

如果不是强制使用字符串插值，则可以完成这项工作。

<img #imgRef style="width:15em; height:15em;" 
src="some source" />

像你一样的滑块

<p-slider class="col-sm-1" [(ngModel)]="upgradeShingle"  (onChange)="handleChangeShingle($event)" [min]="val2" [max]="13" [step]="1" orientation="vertical" [style]="{'height':'30em'}"></p-slider>

确保您要从事件中提取价值并进行分配

@ViewChild('imgRef') el: ElementRef;

handleChangeShingle(e) {

 let source = e.value || e.target.value //which ever works for you     

 this.el.nativeElement.src = '../../assets/shingles/' + source + '.jpg';

 // you other codes here if any

}

角度插值可以在HTML src标签内工作吗？

3 个答案: