ngif 保持假，即使它的值是正确的

Question

我的代码如下所示：

组件.ts

export class ViewScaleComponent implements OnInit {
    private range$: Observable<number>;
    constructor(private store: Store<AppState>) {}

    ngOnInit() {
        this.range$ = this.store.select(x => x.view.range);
    }
}

component.html:

<div *ngIf="(range$ | async)">
  here {{ range$ | async }}
</div>

div 仍然在 DOM 中被注释，一个 Angular Ghost。

如果我删除 ngif，div 会出现，但数据插值不会获取任何内容（仅在此处出现以下空白）。

如果在ngOnInit() 我愿意：

this.range$ = this.store.select(x => x.view.range).do(x => console.log(x));
console.log("on init " + this.range$);

然后我得到：

on init [object Object]
undefined
21

最后两个控制台日志来自同一行 (do())。我想知道第一个undefined是否是不显示di的原因。

值得注意的是，有时它可以工作（我看到div 和range$ 的值正在按预期更新）。

有什么想法吗？

PS：我读过 angular 2 ngIf with observable?，但 observable 和 async 的组合看起来和我的很相似。

Answer 1

你不需要ngIf，只需输入{{ range$ | async}}

更新

range:any ;
ngOnInit() {
    this.store.select(x => x.view.range).subscribe(x => this.range = x);
}

模板

<div *ngif="range">
  here {{ range }}
</div>