Angular 5 [隐藏] 无法正常工作 [英] Angular 5 [hidden] not fully working

问题描述

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

const checkScreenSize = () =>document.body.clientWidth <960;常量源$ =fromEvent(window,'resize').pipe(throttleTime(500));const screenSizeChanged$ = source$.pipe(map(checkScreenSize));this.isScreenSmall$ = screenSizeChanged$.pipe(startWith(checkScreenSize()));

和模板:

<手套-步进-水平></手套-步进-水平>{{isScreenSmall$ |异步}}
<div id="vertical" [hidden]="!isScreenSmall$ | async"><glove-stepper-vertical></glove-stepper-vertical>{{isScreenSmall$ |异步}}

如果条件为真(body

我知道 ngIf 的更好和推荐选项，但是包含在 div 中的是在开始时创建的 svg 标签.如果检测到视图中的更改并将 ngIf.removed 从 Dom 中删除，则引用将被销毁或从未创建，从而导致错误，基于当前值.

如果与 ngIf 结合，changeDetection 实现是否有效.我想一个重新初始化引用 svg 标签的变量的函数会起作用.

感谢所有建议.

解决方案

你的第二个条件不会那样工作，因为 !isScreenSmall$ 将被解析为一个值为 false 只要 isScreenSmall$ 是一个 observable.

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

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

I'm testing an option to display/hide div based on boolean value from an observable. Based on the second answer provided from this stack question, I have the following code which collects the document body width and the returned value is used with a function that returns true:false value.

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()));

and the template:

<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>

The rendering works if the condition is true (body < value) and the vertical div is all that's rendered, however when the condition is false both divs are displayed.

I'm aware of the better and recommended option of ngIf, however included in the div's are svg tags that are created at start time. if a change in the view is detected and ngIf.removed from the Dom the references are destroyed or never created, causing errors, based on the current value.

Would a changeDetection implementation work if incorporated with ngIf. I suppose a function to reinitialize the variables that reference the svg tags would work.

Thanks for all suggestions.

解决方案

Your second condition won't work that way, because !isScreenSmall$ will be resolved to a boolean with a value of false as long as isScreenSmall$ is an observable.

You have to put the observable value in brackets together with the async-pipe operation to make it work correctly:

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

这篇关于Angular 5 [隐藏] 无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！