在 *ngIf 指令中：如何将函数的返回值存储在变量中并在同一个 *ngIf 中使用它？
In *ngIf directive: how to store returned value from a function in a variable and use it in the very same *ngIf?
我的用例如下：
- 我有一个函数returns一个数组
- 我想有条件地渲染组件 - 如果数组存在且其长度大于零。
- 我想将这个返回的数组作为
@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>
不幸的是，我不断收到一堆错误：
Template parse errors: TypeError: Cannot read property 'toUpperCase'
of undefined ("<div>
Parser Error: Unexpected token &&, expected
identifier, keyword, or string at column
Parser Error: Missing expected ) at column 23
[ERROR ->]*ngIf="(customer.getOrders() as orders) && orders.length >
0"
这里是 stackblitz 上面的问题。
我想到了解决办法。
我没有在一个 *ngIf 指令中使用 逻辑合取 我用 <ng-container> 包装了我的组件并且将我的第一个条件放在它的 *ngIf 中，然后将另一个 *ngIf 直接放在组件本身中，因此它仍然是这两个条件的 AND 并且它就像一个魅力，因为根据文档：
The Angular <ng-container> is a grouping element that doesn't
interfere with styles or layout because Angular doesn't put it in the
DOM.
<ng-container *ngIf="customer.getOrders() as orders">
<order-list *ngIf="orders.length > 0" [orders]="orders" ></order-list>
</ng-container>
Stackblitz有解。
我的用例如下：
- 我有一个函数returns一个数组
- 我想有条件地渲染组件 - 如果数组存在且其长度大于零。
- 我想将这个返回的数组作为
@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>
不幸的是，我不断收到一堆错误：
Template parse errors: TypeError: Cannot read property 'toUpperCase' of undefined ("<div>
Parser Error: Unexpected token &&, expected identifier, keyword, or string at columnParser Error: Missing expected ) at column 23
[ERROR ->]*ngIf="(customer.getOrders() as orders) && orders.length > 0"
这里是 stackblitz 上面的问题。
我想到了解决办法。
我没有在一个 *ngIf 指令中使用 逻辑合取 我用 <ng-container> 包装了我的组件并且将我的第一个条件放在它的 *ngIf 中，然后将另一个 *ngIf 直接放在组件本身中，因此它仍然是这两个条件的 AND 并且它就像一个魅力，因为根据文档：
The Angular <ng-container> is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.
<ng-container *ngIf="customer.getOrders() as orders">
<order-list *ngIf="orders.length > 0" [orders]="orders" ></order-list>
</ng-container>
Stackblitz有解。