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

【问题标题】：In *ngIf directive: how to store returned value from a function in a variable and use it in the very same *ngIf?在 *ngIf 指令中：如何将函数的返回值存储在变量中并在同一个 *ngIf 中使用？
【发布时间】：2020-11-11 02:13:48
【问题描述】：

我的用例如下：

我有一个返回数组的函数
我想有条件地渲染一个组件 - 如果一个数组存在并且它的长度大于零。
我想将此返回的数组作为@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>

不幸的是，我不断收到一堆错误：

模板解析错误：TypeError：无法读取属性“toUpperCase” 未定义的 ("

解析器错误：意外令牌 &&，预期列中的标识符、关键字或字符串
解析器错误：第 23 列缺少预期的 )

[ERROR ->]*ngIf="(customer.getOrders() as orders) && orders.length > 0"

这里是stackblitz 上面的问题。

【问题讨论】：

标签： javascript angular typescript angular-directive angular-template

【解决方案1】：

我想出了一个解决办法。

而不是在一个 *ngIf 指令中使用 逻辑连词 *ngIf 直接在组件本身中，所以它仍然是两个条件的 AND 并且它就像一个魅力，因为根据文档：

Angular 是一个分组元素，它不干扰样式或布局，因为 Angular 没有将其放入 DOM。

<ng-container *ngIf="customer.getOrders() as orders">
    <order-list *ngIf="orders.length > 0" [orders]="orders" ></order-list>
</ng-container>

Stackblitz 与解决方案。

【讨论】：