Правильный синтаксис для Angular asyn c pipe с ключевым словом as

Question

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

<ng-container *ngIf="searchResultLength$ | async as srl">
    (search results goes here)
</ng-container>

Но каков синтаксис, если я хочу иметь какой-то другой тип логического оператора? То, что я хочу сделать, это:

<ng-container *ngIf="(searchResultLength$ | async as srl) > 2">
   (search results IF there are more than 2 goes here)
</ng-container>

Что мне кажется, что он должен иметь правильный синтаксис, но отклоняется компилятором. Я не могу найти документ о том, как анализируется ключевое слово as. Может кто-нибудь подсказать мне, какой должен быть правильный синтаксис?

Кроме того, поможет ссылка на соответствующую документацию. Поиск по ключевому слову as бесполезен.

Answer 1

Это на самом деле не правильный синтаксис. Правильный синтаксис для ngIf:

<div *ngIf="condition as value">{{value}}</div>

Синтаксис as может использоваться только после всего условия ngIf и сохраняет значение, которое оценивает условие.

Здесь это альтернатива.

<ng-container *ngIf="searchResultLength$ | async as srl">
  <ng-container *ngIf="srl > 2">
    (search results IF there are more than 2 goes here)
  </ng-container>
</ng-container>

Answer 2

Вот еще одно решение (не очень практичное, но работающее :)), использующее *ngFor и slice pipe:

<ng-container *ngFor="let srl of [length$ | async] | slice : (length$ | async) <= 2"> 
  (search results IF there are more than 2 goes here)
  <br>
  searchResultLength$ = {{ srl }}
</ng-container>

, чтобы не подписываться дважды на length$, используйте его с piped shareReplay() оператор. Я также добавил tap с console.log, чтобы убедиться, что мы подписываемся только один раз, хотя дважды используем async pipe:

length$ = new BehaviorSubject(3).pipe(tap(console.log), shareReplay());

STACKBLITZ: https://stackblitz.com/edit/angular-7pkcnr?file=src%2Fapp%2Fapp.component.ts