Может ли угловая интерполяция работать внутри тега HTML src?

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 имеет интерполяцию переменной Angular с именем upgradeShingle, а ползунок имеет привязку к той же переменной. На странице инициализации это прекрасно работает. Однако, если я перемещаю ползунок и запускается событие onChange, оно обновляет связанную переменную, но изображение не обновляется соответствующим образом. Чего мне не хватает?

Answer 1

Должен работать с любым из следующих синтаксисов:

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

См. этот стек для демонстрации.

<Ч />

Кроме того, обязательно используйте оператор сравнения в операторе if вместо оператора присваивания . Другими словами, замените = на == или ===:

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

Или замените условие if следующим утверждением:

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

Answer 2

Если интерполяция строк не обязательна, это может сделать работу.

<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

}

Answer 3

Браузер не запускается для повторной загрузки изображения. Вот ответ SO о принудительной повторной загрузке . Я применил это (примерно) к вашему вопросу.

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

Это автоматически добавит текущую метку времени, когда вы создание изображения, и это заставит браузер снова искать изображение вместо извлечения в кеш.