时间戳

首页 > 解决方案 > 在订阅中从 succ 更新的 Angular 字段不会传播到呈现的视图

angular - 在订阅中从 succ 更新的 Angular 字段不会传播到呈现的视图

问题描述

我有这样的标记。

<a href="{{testValue}}">
  Clicky here
</a>

在ngOnInit()中，我执行以下代码。

this.someService.someObservable()
  .subscribe(suc => {
    console.log(suc.resId);
    this.testValue = suc.resId;
    console.log(this.testValue);
  });

控制台中的输出结果两次都告诉我，例如se134。因此，我的结论是，我已经从服务中正确获得了值，并且我正在按预期更新该字段。

页面上的预期行为是原始值将更改为从订阅回调中获得的值。那不会发生。

我尝试搜索 Angular 的绑定系统，了解到这是一个非常简单的问题（我的意思是，在这里显示异步加载的值并不是什么大问题）。没有发现任何让我印象深刻的东西与我已经拥有的东西有偏差。

我什至尝试了不同的括号组合，例如[href]="testValue"等等。当然，正如预期的那样，这并没有带来任何改善。

我错过了什么？

标签： angulartypescriptbinding

解决方案

试试这个代码

<a [href]="testValue">Clicky here</a>

但是，您的代码中存在问题。您不会取消订阅您的服务。您可以使用async管道，它会自动为您取消订阅

控制器：

testValue: Observable<string>;

ngOnInit() {
  this.testValue = this.someService.someObservable().map(suc => suc.resId);
}

模板：

<a [href]="testValue | async">Clicky here</a>

推荐阅读