Javascript ngIf和从行为主体检索到的可观测数据之间是否存在冲突？

我面临一个非常奇怪的问题。我使用*ngIf中的Observable来显示错误和异步管道

问题是，当Observable的值更新时，DOM没有更新。它只在我点击页面或使用键盘获得焦点时更新

那么，我应该如何将Observable与DOM绑定呢

我尝试了使用*ngIf、If-else和*ngIf绑定DOM的各种解决方案，包括使用和不使用异步管道等

下面是我如何使用HTML的

<div style="font-size: 0.9rem;" *ngIf="messageInfo | async"
     [ngClass]="{ 'alert': message, 'alert-success': message.type === 'success',
     'alert-danger': message.type === 'error' }">{{message.text}}
  <span (click)="close()" style="cursor: pointer; float: right;">
    <i class="material-icons icon-20 vertical-bottom">close</i>
  </span>
</div>

{{message.text}
关闭

组件代码

export class AlertComponent implements OnInit {

  message: any;
  messageInfo: Observable<any>;

  constructor(private alertService: AlertService) {
  }

  ngOnInit() {
    this.messageInfo = this.alertService.getMessage();
    this.messageInfo.subscribe(message => {
      this.message = message;
    });
  }

  close() {
    this.alertService.close();
    this.message = undefined;
  }
}

导出类AlertComponent实现OnInit{
信息：任何；
messageInfo：可观察的；
构造函数（专用alertService:alertService）{
}
恩戈尼尼特（）{
this.messageInfo=this.alertService.getMessage（）；
this.messageInfo.subscribe（message=>{
this.message=消息；
});
}
关闭（）{
this.alertService.close（）；
this.message=未定义；
}
}

服务

export class AlertService {

  private subject = new BehaviorSubject<any>(null);
  private keepAfterNavigationChange = false;

  constructor(private router: Router) {
    // clear alert message on route change
    router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        if (this.keepAfterNavigationChange) {
          // only keep for a single location change
          this.keepAfterNavigationChange = false;
        } else {
          // clear alert
          this.subject.next(null);
        }
      }
    });
  }

  success(message: string, keepAfterNavigationChange = false) {
    this.keepAfterNavigationChange = keepAfterNavigationChange;
    this.subject.next({type: 'success', text: message});
    // to hide message after 3 seconds.
    setTimeout(() => {
      this.close();
    }, 3000);
  }

  error(message: string, keepAfterNavigationChange = false) {
    this.keepAfterNavigationChange = keepAfterNavigationChange;
    this.subject.next({type: 'error', text: message});
    // to hide message after 3 seconds.
    setTimeout(() => {
      this.close();
    }, 3000);
  }

  getMessage(): Observable<any> {
    return this.subject.asObservable();
  }

  close() {
    this.subject.next(null);
  }
}

导出类警报服务{
私有主体=新行为主体（空）；
private keepAfterNavigationChange=false；
构造函数（专用路由器：路由器）{
//清除有关路线更改的警报消息
router.events.subscribe（事件=>{
if（导航启动的事件实例）{
if（this.keepAfterNavigationChange）{
//仅保留一次位置更改
this.keepAfterNavigationChange=false；
}否则{
//明确警报
this.subject.next（null）；
}
}
});
}
成功（消息：string，keepAfterNavigationChange=false）{
this.keepAfterNavigationChange=keepAfterNavigationChange；
this.subject.next（{type:'success'，text:message}）；
//在3秒钟后隐藏消息。
设置超时（（）=>{
这个。关闭（）；
}, 3000);
}
错误（消息：string，keepAfterNavigationChange=false）{
this.keepAfterNavigationChange=keepAfterNavigationChange；
this.subject.next（{type:'error'，text:message}）；
//在3秒钟后隐藏消息。
设置超时（（）=>{
这个。关闭（）；
}, 3000);
}
getMessage（）：可观察{
返回此.subject.asObservable（）；
}
关闭（）{
this.subject.next（null）；
}
}

我以这种方式在所有其他组件中使用它：

<alert></alert>

---

我希望根据可观察值更新UI，而无需点击或关注页面。不幸的是，只有当我使用鼠标或键盘关注页面时，它才会得到更新。

按照以下建议更新ngZone内的变量： 你的情况应该是这样的：

public constructor(private _ngZone: NgZone) {}
this.messageInfo.subscribe(message => {
   this._ngZone.run(() => {
      this.message = message;
   });
});

如果这不起作用，您可以尝试使用：

import { ChangeDetectorRef } from '@angular/core';
public constructor(private cdr: NgZone) {}
this.messageInfo.subscribe(message => {
      this.message = message;
      this.cdr.markForCheck();
});

---

按照以下建议更新ngZone内的变量： 你的情况应该是这样的：

public constructor(private _ngZone: NgZone) {}
this.messageInfo.subscribe(message => {
   this._ngZone.run(() => {
      this.message = message;
   });
});

如果这不起作用，您可以尝试使用：

import { ChangeDetectorRef } from '@angular/core';
public constructor(private cdr: NgZone) {}
this.messageInfo.subscribe(message => {
      this.message = message;
      this.cdr.markForCheck();
});

---

你能试试下面的吗

从组件中删除

消息

变量 并删除

此.messageInfo.subscribe

行 然后像这样更新你的模板

 <div style="font-size: 0.9rem;" *ngIf="(messageInfo | async) as message"
         [ngClass]="{ 'alert': message, 'alert-success': message.type === 'success',
         'alert-danger': message.type === 'error' }">{{message.text}}
      <span (click)="close()" style="cursor: pointer; float: right;">
        <i class="material-icons icon-20 vertical-bottom">close</i>
      </span>
    </div>

{{message.text}
关闭

您可以尝试以下内容吗-

从组件中删除

消息

变量 并删除

此.messageInfo.subscribe

行 然后像这样更新你的模板

 <div style="font-size: 0.9rem;" *ngIf="(messageInfo | async) as message"
         [ngClass]="{ 'alert': message, 'alert-success': message.type === 'success',
         'alert-danger': message.type === 'error' }">{{message.text}}
      <span (click)="close()" style="cursor: pointer; float: right;">
        <i class="material-icons icon-20 vertical-bottom">close</i>
      </span>
    </div>

{{message.text}
关闭

实际上，我相信OP在模板中使用的是

可观察的| async

。看起来，管道没有将值推送到DOM。@black mamba谢谢您的回复。我已经尝试了上述两种解决方案，并再次尝试以确保我没有犯任何错误。不幸的是，它没有起作用。我更新了我的问题。@BlackMamba您的解决方案有效。真正的问题是检索可观测值。在ngOnInit方法中，当可观测值更新时，我必须调用异步更新方法。在update方法中，我必须使用await检索observable的值。之后，我们可以使用ChageDetectorRef或ngZone解决方案。我认为这可能有助于决定使用什么@请正确更新您的答案。如果其他人面临与我类似的问题，那么使用你的答案，他/她将无法解决问题。请在问题的上下文中更新它。我一定会赞成并投票表决。这就是我在上面的评论中提到解决方案的原因。实际上，我相信OP在模板中使用了

observable | async

。看起来，管道没有将值推送到DOM。@black mamba谢谢您的回复。我已经尝试了上述两种解决方案，并再次尝试以确保我没有犯任何错误。不幸的是，它没有起作用。我更新了我的问题。@BlackMamba您的解决方案有效。真正的问题是检索可观测值。在ngOnInit方法中，当可观测值更新时，我必须调用异步更新方法。在update方法中，我必须使用await检索observable的值。之后，我们可以使用ChageDetectorRef或ngZone解决方案。我认为这可能有助于决定使用什么@请正确更新您的答案。如果其他人面临与我类似的问题，那么使用你的答案，他/她将无法解决问题。请在问题的上下文中更新它。我一定会赞成并投票表决。这就是为什么我在上面的评论中提到了这个解决方案。如果你所附链接中提到的方法不起作用，你需要给我们一个工作模板（stackblitz）。如果你所附链接中提到的方法不起作用，你需要给我们一个工作模板（stackblitz）。谢谢你的回复。在发布此问题之前，我尝试了此解决方案。我现在也尝试了你的解决方案，但也不起作用。我的问题是，当页面获得焦点时，值会更新。代码正在工作，但未按预期工作。如果它不与异步管道一起工作，则无法与com中的订阅一起工作