Angular 5 HTML не обновляется после изменения переменной

Question

У меня странная проблема, когда моя HTML-страница не обновляется при изменении переменной углового компонента.После нажатия кнопки я выполняю сетевую загрузку и начинаю воспроизводить аудио следующим образом:

onPreviewPressed(media: Media): void {
    if (this.playing) {
        this.playing = false;
        this.source.stop();
    }

    this.loading = true;

    this.service.downloadAudio(this.gender, this.style, this.ageRange, media).subscribe(abuf => {
        this.context.decodeAudioData(abuf, buffer => {
            this.source.buffer = buffer;
            this.playing = true;
            console.info(`Playing is ${this.playing}`);
            this.source.start(0);
        }, y => {
            console.info('Error: ' + y);
        });
        this.loading = false;
    }, () => {
        this.loading = false;
    });
}

И затем в моем HTML-файле появляется следующий фрагмент:

Playing is {{ playing }}
<button [hidden]="!playing" style="width: 44px; height: 44px" (click)="onStopPressed()">
    <img src="/assets/stop.png" alt="Stop">
</button>

Когда я нажимаю кнопку,звук правильно загружается и начинает воспроизводиться, и в консоли я вижу, что он говорит Playing is true, но HTML продолжает показывать false и не отображает кнопку.

Я подумал, что это может быть проблема this на самом деле это не компонент, а переменная окна, но если бы это было так, то звук действительно мог бы воспроизводиться, так как переменная source является частью компонента.

Answer 1

Вы пробовали это:

<button *ngIf="playing" style="width: 44px; height: 44px" (click)="onStopPressed()">
    <img src="/assets/stop.png" alt="Stop">
</button>

Answer 2

Возможная причина

Похоже, что playing не захватывается как часть механизма обнаружения изменений Angular.

Исправление: у вас есть несколько вариантов

Во-первых, необходимо установить и установить для функций playing

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

в тс

get playingValue(){
    return this.playing;
}

set playingValue(playing){
    this.playing = playing;
}

html

Playing is {{ playingValue }}

Второй вариант - setTimeout

this.service.downloadAudio(this.gender, this.style, this.ageRange, media).subscribe(abuf => {
        this.context.decodeAudioData(abuf, buffer => {
            this.source.buffer = buffer;

            setTimeout(()=>this.playing = true);  //setTimeout

            console.info(`Playing is ${this.playing}`);
            this.source.start(0);
        }, y => {
            console.info('Error: ' + y);
        });
        this.loading = false;
    }, () => {
        this.loading = false;
    });