Question

当我想要执行以下操作时，我经常会遇到这种情况：

<component-name 
  *ngIf="(referralsService.referrals$ | async; let referrals).length > 0
></component-name>

但这是不允许的。是否有更好的方法来允许我命名变量，以便以后可以使用它，同时还可以调用length或其他名称？

Answer 1

无法在一个*ngIf语句中执行此操作，但是可以使用<ng-container>包装器：

<ng-container *ngIf="referralsService.referrals$ | async as referrals">
  <component-name *ngIf="referrals.length > 0"></component-name>
</ng-container>

Angular <ng-container>标签是一个分组元素，它不会干扰样式或布局，因为Angular不会将其放在DOM中。

对于两个可观察对象，您可以使用：

<ng-container *ngIf="{ 
  unused: (referralsService.unusedReferrals$ | async),
  used: ( referralsService.referrals$ | async) 
} as referrals">
  <component-name-1 *ngIf="referrals.used?.length > 0"></component-name-1>
  <component-name-2 *ngIf="referrals.unused?.length > 0"></component-name-2>
</ng-container>

在异步管道中设置变量名称

1 个答案: