Question

我的代码如下所示：

component.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?，但是可观察和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>

ngif保持为false，即使其值正确

1 个答案: