时间戳

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

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

问题描述

我的用例如下：

  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>

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

模板解析错误：TypeError：无法读取未定义的属性“toUpperCase”（“<div>

解析器错误：意外的标记 &&、预期的标识符、关键字或列中的字符串

第 23 列的解析器错误：缺少预期的）

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

这是具有上述问题的堆栈闪电战。

标签： javascriptangulartypescriptangular-directiveangular-template

解决方案

我想出了一个解决方案。

我没有在一个指令中使用逻辑连词，而是将我的组件包装起来，并将我的第一个条件放入其中，然后将另一个直接放入组件本身，因此它仍然是两个条件的 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的解决方案。

推荐阅读