时间戳

首页 > 解决方案 > 角度插值可以在 HTML src 标签内工作吗？

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

问题描述

我有一个简单的应用程序，允许用户在开始时选择一个木瓦。然后，他们会看到升级该木瓦的选项。在升级页面上，木瓦图像应作为选择升级的带状疱疹进行更新。

在升级页面上，他们在图像中显示了他们当前的 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 事件，它会更新绑定变量，但图像不会相应更新。我错过了什么？

标签： htmlangular

解决方案

它应该适用于以下任何语法：

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

请参阅此 stackblitz以获取演示。

此外，请确保在语句中使用比较运算符if而不是赋值运算符。换句话说，=用==or替换===：

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

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

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

推荐阅读