ngIf Async Pipe как значение только с нулевой проверкой

У меня есть наблюдаемое, с которым я хотел бы создать переменную в ngIf, а также возвращать false, только если значение равно null (наблюдаемое возвращает число)

Мне нужно явно проверить значение null, поскольку мой наблюдаемый объект может возвращать 0 в качестве значения, которое запускает блок else.

Я пробовал следующее

*ngIf="(observable$ | async) as obs; obs !== null; esle #elseTemplate"

*ngIf="((observable$ | async) as obs) !== null; esle #elseTemplate"

*ngIf="(observable$ | async) !== null; $implicit = obs; else #elseTemplate"
// this returns the boolean

Мое текущее решение, которое не кажется очень элегантным,

*ngIf="(observable$ | async) !== null; esle #elseTemplate"
{{ observable$ | async }}

Я использую Ангуляр 10.


angular rxjs angular10 async-pipe rxjs-observables
person iamsimonsmale    schedule 13.11.2020    source источник
comment
разве это не работает без нулевой проверки? *ngIf=наблюдаемый$ | асинхронный как наблюдения; еще elseШаблон   -  person Pedro Bezanilla    schedule 13.11.2020
comment
мое значение - это число, которое может возвращать 0 и поэтому не отображается, оно переходит в elseTemplate   -  person iamsimonsmale    schedule 13.11.2020
comment
null является ложным. Теоретически (observable$ | async) !== null и (observable$ | async) одинаковы.   -  person Michael D    schedule 13.11.2020

Ответы (2)


arrow_upward
1
arrow_downward

Обычно, когда я имею дело с observables в таком шаблоне, мне гораздо проще создать один observable vm$, построенный из других observables в таком компоненте (обратите внимание, в конце концов, combLatest будет поддерживать словари, что означает, что у вас не будет сделать карту):

vm$ = combineLatest([
    observable$,
    observable2$,
])
.pipe(
    map(([observable, observable2]) => ({
        observable,
        observable2
    }))
);

Затем в своем доме вы выполняете ngIf на vm$ и можете напрямую сравнить вывод вашего наблюдаемого.

<ng-container *ngIf="vm$ | async as vm">
    <ng-container *ngIf="vm.observable !== null; else #elseTemplate">
    
    </ng-container>
    ...
</ng-container>

РЕДАКТИРОВАТЬ Поскольку, когда combLatest поддерживает словарь, создание vm$ становится проще:

vm$ = combineLatest({
    observable: observable$,
    observable2: observable2$
})
person Mathew Berg    schedule 13.11.2020
comment
У этого шаблона есть название или у вас есть ссылка на дополнительную информацию? если бы у вас было больше, вы бы сделали vm$ = combineLatest([ observable$, obn$ ]) .pipe( map(([observable,obn$]) => ({ observable, obn$ })) );??? - person iamsimonsmale; 13.11.2020
comment
Это перенесено из того времени, когда я довольно много работал с angularJs. Я помню, как видел его на видео с множественным числом, и быстрый поиск в Google показывает, что другие тоже его используют. И вы совершенно правы, это сработает именно так (я обновил свой ответ). - person Mathew Berg; 13.11.2020

arrow_upward
0
arrow_downward

Другой подход, который я могу порекомендовать, — это использование директивы ngxObserve от Нильса Мельхорна https://github.com/nilsmehlhorn/ngx-observe

С помощью этой директивы вам разрешено определять шаблоны для следующего, загрузки и даже ошибки. Следующий шаблон также срабатывает, если выдается ложное значение, такое как ваш ноль.

*ngxObserve="observable$; let obs; before loadingTemplate; error errorTemplate"
person MoxxiManagarm    schedule 13.11.2020
comment
Я бы устал от использования сторонних пакетов npm, которые редко используются или обслуживаются. Глядя на github, последнее реальное изменение кода было 8 месяцев назад. Он не соответствует последним 2 версиям angular (и нескольким второстепенным). - person Mathew Berg; 13.11.2020
comment
Это просто удобная директива, каких регулярных обновлений вы ожидаете? Он также мог скопировать код директив. - person MoxxiManagarm; 13.11.2020