Ionic框架：添加条目时隐藏空状态div的实现方法咨询

嘿，这事儿用Angular自带的*ngIf指令就能轻松解决，完全不用手动操作DOM元素，非常简便！

具体实现步骤： #

• 给你的空状态<div class="center-div">加上*ngIf指令，绑定到items数组的长度判断逻辑上。当数组里有内容时，这个div会自动隐藏。
• 点击添加按钮后，你肯定会往items数组里新增元素，Angular的变更检测会自动识别数组长度的变化，进而自动控制这个div的显示/隐藏状态。

修改后的完整代码如下：

<ion-content> 
<!-- DIV ABOVE --> 
<div class="center-div" *ngIf="items.length === 0"> 
<img src="assets/imgs/noItem.svg" /> 
<div class="center"> 
<h1>Empty List</h1> 
</div> 
</div> 
<ion-refresher (ionRefresh)="doRefresh($event)"> 
<ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="Refreshing..."> 
</ion-refresher-content> 
</ion-refresher> 
<ion-list> 
<button *ngFor="let item of items" ion-item (click)="goToItemDetail(crop)"> ... 
</ion-list> 
<ion-fab right bottom> 
<button ion-fab class="button-fab" (click)="addItem()"> 
<ion-icon name="add"></ion-icon> 
</button> 
</ion-fab> 
</ion-content>

额外优化建议（可选）： #

如果你的items数组初始化时可能是null或者undefined，可以把判断条件改成*ngIf="!items || items.length === 0"，这样能避免空指针错误，让代码更健壮。

这样一来，当你点击添加按钮往items里加入第一条数据后，空状态的div就会立刻消失，完美匹配你的需求～

内容的提问来源于stack exchange，提问作者firewallcj