Не следует отрицать асинхронные каналы

Question

Я мигрировал из TSLint в ESLint следующих руководств . Теперь я получаю это сообщение об ошибке:

Не следует отрицать асинхронные каналы. Вместо этого используйте (observable | async) === (false | null | undefined), чтобы проверить его значение.

И вот данное объяснение :

Асинхронные каналы Angular изначально генерируют null, до того, как наблюдаемый испускает какие-либо значения или не разрешает обещание. Это может вызвать отрицания, такие как * ngIf = ”! (MyConditional | async)”, чтобы перебить макет и вызвать дорогостоящие побочные эффекты, такие как отключение запросов XHR для компонента, который не должен отображаться.

Но я не понимаю предлагаемого решения, особенно побитового ИЛИ: false | null | undefined. Когда я пытаюсь написать (false | null | undefined) в шаблоне Angular, похоже, учитывает nullи как каналы (что кажется допустимым) и выдает сообщение об ошибке. Даже вне html-шаблона это побитовое ИЛИ просто возвращает 0, так в чем же смысл? Я тоже пробовал false || null || undefined но на самом деле это эквивалентно undefined

Я что-то пропустил ? Или сообщение об ошибке вводит в заблуждение? Как мне тогда писать?

Лучшее, что у меня есть, это довольно уродливо:

      (observable | async) === false || (observable | async) === undefined

Answer 1

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

      import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'isFalsy',
  pure: false,
})
export class IsFalsyPipe implements PipeTransform {
  transform(value: any): any {
    return value ? false : true;
  }
}

Импортируйте в свой модуль, а затем сравните его следующим образом:

      <div *ngIf="observable$ | async | isFalsy"></div>

Answer 2

Проблема:

Отрицание асинхронного канала в *ngIf приводит к сбою макета, поскольку канал выдает значение null непосредственно перед проверкой условия. Это может привести к ненужной работе по рендерингу и вызвать события компонента, которые заставят выполнять XHR или другую работу, которая не должна быть необходима.

Решение :

      <div *ngIf="!!(observable$ | async)"></div>

Вот подробности, которые вы можете изучить подробнее: https://github.com/angular/angular/issues/44867.