Question

我有一个要根据网络电话的响应调整其高度的元素。最初，我将高度样式设置为0px

public voiceCommCockpitHeight = { height: '150px' };

代码是这样的

this.api.get(`${bots_uri}voicecomm/hello?q=${this.commandText.nativeElement.innerText}`).subscribe(
        (response) => {
          console.log('voice command response', response);


        },
        (error) => {

        },
        () => {
           this.voiceCommCockpitHeight = { height: '0px' };
           this.isVoiceCommActive = false;
        }
      )

toggleVoiceCommand(){
    if (this.isVoiceCommActive == false){
      this.voiceCommCockpitHeight = { height: '150px' };
      this.isVoiceCommActive = true;
      this.startMic("#command-text");
      setTimeout(() => {
        this.endMic();
      }, 10000);
    } else {
      this.voiceCommCockpitHeight = { height: '0px' };
      this.isVoiceCommActive = false;
      this.endMic();
    }

  }

这是来自html的click函数调用

activateVoiceComm($e) {
    this.toggleVoiceCommand();
  }

但是ngStyle的高度保持其先前的值。如果我在按钮上单击它，它将起作用。我也尝试了异步管道，但是没有运气。

Answer 1

最终，这是一个角度变化检测问题。要全面了解其工作原理，建议使用this article.

简而言之，当可观察对象发出值（或完成）时运行的回调在Angular之外运行。因此，Angular框架不知道支持视图的数据已更改。要解决此问题，您必须手动告诉Angular“嘿，事情已经变了！”。

constructor(private changeDetector: ChangeDetectorRef) {}

doStuff() {
    this.api.get(`${bots_uri}voicecomm/hello?q=${this.commandText.nativeElement.innerText}`).subscribe(
        (response) => {
          console.log('voice command response', response);
        },
        (error) => {
        },
        () => {
           this.voiceCommCockpitHeight = { height: '0px' };
           this.isVoiceCommActive = false;
           this.changeDetector.markForCheck();
        }
      )
}

NgStyle未在可观察到的完整回调中更新

1 个答案: