Использование ключевого слова as, а затем длины в том же ngIf

Question

Я хочу избежать множественных операций syn c и хочу назначить свойство asyn c с ключевым словом AS и дополнительно проверять длину. Я попробовал следующий код, но он выдает ошибку:

<div *ngIf="(selectedNames$ | async as selectedNames)?.length"> {{selectedNames}}</div>

Я тоже попробовал другой вариант, но он все тот же:

<div *ngIf="((selectedNames$ | async) as selectedNames)?.length"> {{selectedNames}}</div>

Скобки не находятся в правильном положении . Возможно ли это вообще?

Answer 1

Один из способов получить желаемый результат - использовать две директивы *ngIf. Первый, примененный к ng-container, определяет переменную selectedNames. Второй применяет условие *ngIf с selectedNames.length к элементу div:

<ng-container *ngIf="(selectedNames$ | async) as selectedNames">
  <div *ngIf="selectedNames.length">
    {{selectedNames | json}}
  </div>
</ng-container>

См. this stackblitz для демонстрации.