Angular 5 [скрыто] не полностью работает

Question

Я тестирую опцию отображения / скрытия div на основе логического значения из наблюдаемой.Основываясь на втором ответе из этого вопроса стека , у меня есть следующий код, который собирает ширину тела документа, и возвращаемое значение используется с функцией, которая возвращает значение 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>

Рендеринг работает, если условие истинно (тело <значение), и вертикальный div - это все, что отображается, однако, когда условие ложно, отображаются оба div.1009 * <p>Я знаю о лучшей и рекомендуемой опции ngIf, однако в div включены теги svg, которые создаются во время запуска.если изменение в представлении обнаружено и ngIf.removed из Dom, ссылки уничтожаются или никогда не создаются, что приводит к ошибкам в зависимости от текущего значения.

Будет ли реализация changeDetection работать, если включена в ngIf.Я полагаю, что функция для повторной инициализации переменных, которые ссылаются на теги svg, будет работать.

Спасибо за все предложения.

Answer 1

Ваше второе условие не будет работать таким образом, потому что !isScreenSmall$ будет преобразовано в логическое значение со значением false, пока isScreenSmall$ является наблюдаемым.

Вы должны поместить наблюдаемое значение в скобки вместе с операцией асинхронной передачи, чтобы она работала правильно:

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