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

【问题标题】：Can angular interpolation work inside of an HTML src tag?角度插值可以在 HTML src 标签内工作吗？
【发布时间】：2019-10-27 05:00:36
【问题描述】：

我有一个简单的应用程序，允许用户在开始时选择一个木瓦。然后，他们会看到升级该木瓦的选项。在升级页面上，Shingle Image应更新为选择升级的Shingle。

在升级页面上，他们在图像中显示了他们当前的 shingle。

<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 事件，它会更新绑定变量，但图像不会相应更新。我错过了什么？

【问题讨论】：

标签： html angular

【解决方案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;

【讨论】：

感谢您的帮助。第一个选项基本上与我的原始代码相同。它显示图像，但不会随着滑块的移动而更新。第二个选项的行为与第一个完全相同。感谢您的帮助，但我遇到的问题是缺少基于滑块移动和更新“upgradeShingle”变量的图像“更新”。
我认为问题出在if (this.upgradeShingle = this.currentShingle.shingleID)。将= 替换为== 或===。
这解决了问题！！！哇，谈论一件让一切变得不同的小事！非常感谢@ConnorsFan！

【解决方案2】：

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

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

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

【讨论】：

【解决方案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

}

【讨论】：