blocks|key|4074347|text|而不是*ngIf="($showLeftNavi+%7C+async)+!==+'null'"，尝试一下*ngIf="$showLeftNavi+%7C+async"|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4074348|尽管如此，变量$showLeftNavi似乎并不是可观察的，所以%7C+async是不必要的。|4074349|entityMap^0|3|16|1E|T|0|7|D|W|7|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|I|$]]

Instead of <code>*ngIf="($showLeftNavi | async) !== 'null'"</code> try just <code>*ngIf="$showLeftNavi | async"</code>

That said, your variable <code>$showLeftNavi</code> doesn't appear to be an observable, so <code>| async</code> isn't necessary.

blocks|key|1799455|text|您不需要async管道，因为showLeftNavi是不可观察的或许诺的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1799456|异步管道订阅一个可观察的或承诺，并返回它发出的https://angular.io/api/common/AsyncPipe的最新值。|blockquote|1799457|<div+*ngIf="showLeftNavi$">
++++soo+{{+showLeftNavi$+}}+//nothing+prints+here.
</div>|code-block|syntax|javascript|1799458|在一个地方使用showLeftNavi$，在另一个地方使用$showLeftNavi。|1799459|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/api/common/AsyncPipe^0|4|5|E|C|0|N|13|0|0|0|7|D|T|D|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|I|3|J|5|K|7|16|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|P|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

You do not need <code>async</code> pipe since <code>showLeftNavi</code> is not observable or promise. 

<blockquote>
 The async pipe subscribes to an Observable or Promise and returns the
 latest value it has emitted
 <a href="https://angular.io/api/common/AsyncPipe" rel="nofollow noreferrer">https://angular.io/api/common/AsyncPipe</a>
</blockquote>

<pre><code>&lt;div *ngIf="showLeftNavi$"&gt;
 soo {{ showLeftNavi$ }} //nothing prints here.
&lt;/div&gt;
</code></pre>

At one place you are using <code>showLeftNavi$</code> and in another place you are using <code>$showLeftNavi</code>.

blocks|key|1799474|text|正如前面提到的答案异步适用于可观测的，但是我不认为他们的答案会像您想要的那样工作(如果您只是去掉异步，那么您只会得到布尔值的第一个值，不管您的可观察的触发次数是多少次)。this.store.pipe(select(ObservableActions.getNaviState))是您希望将async管道分配给的内容如下：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1799475|$showLeftNavi:+Observable<boolean>;

++++constructor(private+store:+Store<StateShared>)+{+}

++++ngOnInit()+{
++++++++this.$showLeftNavi+=+this.store.pipe(select(ObservableActions.getNaviState));
++++}|code-block|syntax|javascript|1799476|(您的html没有更改)|1799477|entityMap^0|2D|1J|41|5|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

As noted by previous answers async works for observable, but I don't think their answer would work as you want (if you just get rid of the async you'll only get the fist value of the boolean, no matter how many times your observable fired). <code>this.store.pipe(select(ObservableActions.getNaviState))</code> is what you want to assign the <code>async</code> pipe to like so:

<pre><code>$showLeftNavi: Observable&lt;boolean&gt;;

 constructor(private store: Store&lt;StateShared&gt;) { }

 ngOnInit() {
 this.$showLeftNavi = this.store.pipe(select(ObservableActions.getNaviState));
 }
</code></pre>

(no change to your html)

blocks|key|4074385|text|我遇到的问题是，如何使用异步管道订阅可观察到的内容，并使*ngIf值即使值计算为falsy+(例如)也是真实的(例如。枚举的0值)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4074386|组件：|BOLD|4074387|myEnum$:+Observable<MyEnum>;

getDescription(enum:+MyEnum):+void+{....}|code-block|syntax|javascript|4074388|视图：|4074389|<div+*ngIf="(myEnum$+%7C+async)+as+myEnum">
+++++{{getDescription(myEnum)}}++++<--+still+want+this+to+display+when+0
</div>|4074390|我的结论是，对于具有两个不同功能的异步管道的*ngIf来说，这是一个问题：|4074391|内容的有条件显示|unordered-list-item|4074392|订阅可观测数据，以便框架正确地管理拆卸。|4074393|最后我所做的是将枚举封装在一个对象中，因此*ngIf计算对象上的truthy，然后展开enum值以传递给函数。|4074394|<div+*ngIf="(myWrapperObject$+%7C+async)+as+myWrapperObject">
+++++{{getDescription(myWrapperObject.enumValue)}}+
</div>|4074395|我很想知道其他人是否知道更好的方法。|4074396|entityMap^0|S|5|0|0|3|0|0|0|3|0|0|M|5|0|0|0|L|5|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@$9|1A|A|1B|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|1C|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|1D|8|@$9|1E|A|1F|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|1G|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|T|3|U|5|V|7|1K|8|@]|D|@]|E|$]]|$1|W|3|X|5|V|7|1L|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|1M|8|@$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|10|3|11|5|K|7|1P|8|@]|D|@]|E|$L|M]]|$1|12|3|13|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|14|3|-4|5|6|7|1R|8|@]|D|@]|E|$]]]|15|$]]

The issue I had that brought me to this question was how do I use the async pipe to subscribe to an observable, and have the <code>*ngIf</code> evaluate as truthy even when the value evaluates as falsy (eg. the 0 value for an enum).
Component:
<pre><code>myEnum$: Observable&lt;MyEnum&gt;;

getDescription(enum: MyEnum): void {....}
</code></pre>
View:
<pre><code>&lt;div *ngIf=&quot;(myEnum$ | async) as myEnum&quot;&gt;
 &lt;span&gt; {{getDescription(myEnum)}}&lt;/span&gt; &lt;-- still want this to display when 0
&lt;/div&gt;
</code></pre>
My conclusion is that it is an issue with <code>*ngIf</code> with async pipe having two different functions:
<ul>
<li>Conditional showing of content</li>
<li>Subscribing to observables so that the framework manages teardown properly</li>
</ul>
What I ended up doing was wrapping the enum in an object, so the <code>*ngIf</code> evaluates truthy on the object, then unwrapping the enum value to pass to the function.
<pre><code>&lt;div *ngIf=&quot;(myWrapperObject$ | async) as myWrapperObject&quot;&gt;
 &lt;span&gt; {{getDescription(myWrapperObject.enumValue)}} &lt;/span&gt;
&lt;/div&gt;
</code></pre>
I'd be interested to know if others know of a better way though.

I am getting <code>boolean</code> value from observable. I am trying to print that. But nothing get print for me.

here is my subscribe:

<pre><code>showLeftNavi$: boolean;

 constructor(private store: Store&lt;StateShared&gt;) { }

 ngOnInit() {
 this.store.pipe(select(ObservableActions.getNaviState)).subscribe(data =&gt; {
 console.log('data', data); //getting true
 this.showLeftNavi$ = data;
 });
 }
</code></pre>

here is my template:

<pre><code>&lt;div *ngIf="($showLeftNavi | async) !== 'null'"&gt;
 soo {{ $showLeftNavi }} //nothing prints here.
&lt;/div&gt;
</code></pre>

so how to check the null here and print my <code>Boolean</code> value?

*ngIf - how to do the null check in template

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我从可观察到的地方得到boolean值。我想把它打印出来。但没什么能给我印出来的。这是我的订阅：showLeftNavi$: boolean; constructor(private store: Store<StateShared>) { } ngOnInit() { this.store....

问*ngIf -如何在模板中执行空签
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问*ngIf -如何在模板中执行空签EN