变量更改后Angular 5 HTML未更新

Posted 2023-02-18

【中文标题】变量更改后Angular 5 HTML未更新

【英文标题】：Angular 5 HTML not updating after variable change

【发布时间】：2019-03-25 05:47:37

【问题描述】：

我遇到了一个奇怪的问题，我的 html 页面在 angular 组件变量更改时没有更新。按下按钮后，我进行网络加载并开始播放音频，如下所示：

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 上我有这个 sn-p:

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

当我单击按钮时，音频会正确下载并开始播放，在控制台中我看到它显示 Playing is true 但 HTML 继续显示为 false，并且不显示按钮。

我认为这可能是this 不是真正的组件而是窗口变量的问题，但如果是这种情况，那么音频真的可以播放，因为source 变量是组件。

【问题讨论】：

你能告诉我们调用onPreviewPressed的代码吗？

其实不推荐使用hidden blog.angularjs.org/2016/04/…

【参考方案1】：

可能的原因

看起来playing 没有被捕获为 Angular 中变更检测器机制的一部分。

修复：您有几个选择

首先是对playing变量使用setter和getter

函数作为变化检测器的一部分始终发挥着至关重要的作用，因此它可以确保您的变量变化得到反映。

在 *.ts 中

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;
    );

【参考方案2】：

你试过了吗：

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

【参考方案3】：

我遇到了类似的问题并通过以下方式解决了它：

#Inject ChangeDetectorRef to the constructor
 constructor(private changeDetectorRef: ChangeDetectorRef)

ngOnInit(): void 
  # get data or listen to changes
  # then 
  this.changeDetectorRef.detectChanges();

记得通过以下方式导入：

import  ChangeDetectorRef  from '@angular/core';