在 *ngIf 指令中：如何将函数的返回值存储在变量中并在同一个 *ngIf 中使用它？

Question

我的用例如下：我有一个返回数组的函数我想有条件地渲染一个组件——如果一个数组存在并且它的长度大于零。我想将这个返回的数组作为一个传递@Input()给这个组件。因为数组的内容是计算出来的，所以我不想调用这个函数两次，因此使用 getter 也无济于事。我尝试了很多不同的方法，仅举几例：<order-list *ngIf="customer.getOrders() as orders && orders.length > 0" [orders]="orders" ></order-list> <order-list *ngIf="(customer.getOrders() as orders) && orders.length > 0" [orders]="orders" ></order-list> <order-list *ngIf="(customer.getOrders()) as orders && (orders.length > 0)" [orders]="orders" ></order-list>不幸的是我不断收到一堆错误：模板解析错误：类型错误：无法读取未定义的属性“toUpperCase”（“<div>解析器错误：意外的标记 &&、预期的标识符、关键字或列中的字符串解析器错误：第 23 列缺少预期的 )[错误 ->]*ngIf="(customer.getOrders() 作为订单) && orders.length > 0"这是一个有上述问题的stackblitz 。

Answer 1

我想出了一个解决方案。

我没有在一个指令中使用逻辑连词，而是用我的组件包装了我的第一个条件，然后将另一个条件直接放在组件本身中，所以它仍然是两个条件的 AND 并且它像一个魅力一样工作，因为根据文档：*ngIf<ng-container>*ngIf*ngIf

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

<ng-container *ngIf="customer.getOrders() as orders">

    <order-list *ngIf="orders.length > 0" [orders]="orders" ></order-list>

</ng-container>

Stackblitz与解决方案。