如何确定我的 *ngFor 返回是否为空?

Question

我有以下代码：

<ng-container *ngFor="let art of artefacts; let i = index">
<div *ngIf="art.isSelected == true" fxLayout="row" class="selected-artefacts">
</div>
</ng-container>

我在文物中找到所有物品并显示它们是否具有属性isSelected == true.现在，如果工件中没有元素是 Selected = true，我需要显示"没有要显示的项目"。我如何实现这一点？

Answer 1

如果使用管道过滤 (| filter(，您可以使用

<div *ngFor="let item of artefacts">{{item.name}} 
<input type="checkbox" [(ngModel)]="item.isSelected" (ngModelChange)="tick = tick+1">
</div>
<hr>
<ng-container *ngIf="artefacts | isSelected:tick as result; else noItems">
<!-- else is to cover the case where "artefacts" is "null" or "undefined" -->
<div *ngFor="let item of result; let i = index" fxLayout="row" 
class="selected-artefacts">{{item.name}}</div>
<!-- the case where the pipe returns an empty array  -->
<ng-container *ngIf="!result.length" [ngTemplateOutlet]="noItems"></ng-container>
</ng-container>
<ng-template #noItems>no Items</ng-template>

堆栈闪电战示例

as是在 https://github.com/angular/angular/blob/master/CHANGELOG.md#400-rc4-2017-03-17 中添加

的

Answer 2

在这种情况下避免 IF/ELSE 的另一种方法仅使用 CSS，它适用于任何框架(Angular、React、Vue 等(

.no-item:not(:first-child) {
display:none;
}

只需用任何标签(section，div， ul， ...(包装列表，然后添加最后一项，其中包含要显示的消息并添加上面的类。

在这里找到一个工作示例：https://codepen.io/cacothi/pen/vYEJxKR

Answer 3

您可以在循环后简单地获得*ngIf条件。

<ng-container *ngFor="let art of artefacts; let i = index">
<div *ngIf="art.isSelected == true" fxLayout="row" class="selected-artefacts">
</div>
</ng-container>
<!-- here -->
<div *ngIf="!artefacts || hasNoSelectedArtefacts()">
No items to display
</div>

在组件端有一个函数来检查数组：

hasNoSelectedArtefacts(){
return artefacts.filter(art => art.isSelected).length===0;
}

Array.prototype.filter可用于检查是否有任何带有isSelected的项目。

Answer 4

<ng-container *ngFor="let art of artefacts; let i = index">
<div *ngIf="art.isSelected" fxLayout="row" class="selected-artefacts">
<!-- Content -->
</div>
</ng-container>
<ng-container *ngIf="noneSelected">
<!-- none selected -->
</ng-container>

在控制器中

this.noneSelected = this.artefacts.filter(a => a.isSelected).length;

Answer 5

在我的手机上执行此操作，以便仅文本回答。

执行此操作的方法是检查数组长度是否为 0。如果是这样，则将 css 属性绑定到说出您要说的消息的文本。

容易