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

Question

我的用例如下：

1. 我有一个返回数组的函数

2. 我想有条件地渲染一个组件——如果一个数组存在并且它的长度大于零。

3. 我想将这个返回的数组作为一个传递@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*ngIfAngular <ng-container> 是一个分组元素，它不会干扰样式或布局，因为 Angular 不会将它放在 DOM 中。<ng-container *ngIf="customer.getOrders() as orders">&nbsp; &nbsp; <order-list *ngIf="orders.length > 0" [orders]="orders" ></order-list></ng-container>Stackblitz与解决方案。