Как обрабатывать логические наблюдаемые с помощью асинхронной трубы в Angular - PullRequest
Новая
       18

Как обрабатывать логические наблюдаемые с помощью асинхронной трубы в Angular

4 голосов
/ 22 марта 2019

У меня есть следующий код: 

public obs$: Observable<boolean>

<div *ngIf="(obs$ | async) === true || (obs$ | async) === false">
  {{ (obs$ | async) ? 'yes' : 'no' }}
</div>

Он работает как задумано, но if выглядит немного многословно.

Проблема в том, что я не могу просто сделать<div *ngIf="(obs$ | async)">.Если я попытаюсь это сделать, это сработает в том случае, если наблюдаемая еще не испустила значение или если значение равно true, но не сработает, если значение равно false, потому что if будет иметь значение false, а div - нет.

Я предполагаю, что та же проблема применима, если возвращается ложное значение, такое как пустая строка или 0.

Есть ли лучший, более простой способ сделать это?

Ответы [ 3 ]

5 голосов
/ 22 марта 2019

Вы можете сделать (obs$ | async) !== null

2 голосов
/ 01 мая 2019

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

<ng-container *ngIf="{value: obs$ | asyc} as context">
    {{context.value}}
</ng-container>

Значение *ngIf будет равно true независимо от того, что (я верю), и тогда вы сможете выполнить свои собственные тесты для value в context объекте.

... было бы лучше, если бы они просто реализовали *ngLet Я думаю!

Что мне нравится в этом решении, так это то, что полученное значение можно многократно использовать, используя только один раз async канал, и оно все еще довольно лаконично (даже если оно не идеально).

0 голосов
/ 22 марта 2019

Я думаю, что наиболее элегантным способом должно быть создание пользовательского BoolPipe ， и цепочка его после асинхронного канала。 

@Pipe({name: 'myBool'})
export class MyBoolPipe implements PipeTransform {
  transform(value: boolean, exponent: string): string {
    return !value ? 'yes' : 'no';
  }
}

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

<div>{{ obs$ | async | myBool }}</div>
...