我正在测试一个选项,根据来自observable的布尔值显示/隐藏div.基于此stack question提供的第二个答案,我有以下代码收集文档正文宽度,返回值与返回true：false值的函数一起使用.

const checkScreenSize = () => document.body.clientWidth < 960;
const source$= 
fromEvent(window,'resize').pipe(throttleTime(500));

const screenSizeChanged$= source$.pipe(map(checkScreenSize));

this.isScreenSmall$= screenSizeChanged$.pipe(startWith(checkScreenSize()));

和模板：

<div "horizontal" [hidden]="isScreenSmall$| async">
 <glove-stepper-horizontal ></glove-stepper-horizontal>
   {{isScreenSmall$| async}}
</div>
<div id="vertical" [hidden]="!isScreenSmall$| async">
 <glove-stepper-vertical></glove-stepper-vertical>
 {{isScreenSmall$| async}}
</div>

如果条件为真(body< value)并且垂直div是渲染的全部,则渲染工作,但是当条件为false时,显示两个div. 我知道ngIf的更好和推荐的选项,但div中包含的是在开始时创建的svg标签.如果检测到视图中的更改并且从Dom中删除了ngIf.remove,则会销毁或永远不会创建引用,从而导致基于当前值的错误. 如果与ngIf合并,changeDetection实现是否有效.我想一个函数来重新初始化引用svg标签的变量将起作用. 谢谢你的所有建议.

解决方法:

你的第二个条件不会那样,因为只要isScreenSmall $是一个observable,isScreenSmall $将被解析为一个值为false的布尔值.

您必须将observable值与async-pipe操作一起放在括号中,以使其正常工作：

<div id="vertical" [hidden]="!(isScreenSmall$| async)">
  <glove-stepper-vertical></glove-stepper-vertical>
  {{isScreenSmall$| async}}
 </div>