删除所有项目后删除空列表项

Question

当我从Angular 2中的列表中删除项目时，一切都运行正常，直到我删除列表中的最后一项。当我删除最后一项时，内容被删除并从数据库中删除，这是正确的但我留下了一个空的UI组件列表，当应该发生的事情时，列表应该看起来像我之前添加的任何内容一样空首先是项目。

编辑： 删除所有目标后，查看目标列表中的剩余存根。

Goals.component

// Get Goals for Team
      this.goals$ = this.teamsService.getAllGoalsForTeam(this.team.slug);

<goal-item [goals]="goals$ | async"></goal-item>

目标-item.component

<div class="col-xs-4 goal-container" *ngFor="let goal of goals">
   #Goal structure here
</div>

删除功能

delete(goal){
    this.goalsService.deleteGoal(goal);
  }

Goals.service

// Delete Goal

      deleteGoal(goal) {
        this.af.database.object('goals/' +  goal.$key).remove();
      }

Answer 1

在Firebase中，您将无法使节点中的第一个位置无效。如果你想要它已被处理，那么我建议使用像angularfire这样的库。否则，如果你想自己处理它：

//In the Component : 
<div class="col-xs-4 goal-container" *ngFor="let goal of goals">
   <div *ngIf="checkForData(goal)">
   #Goal structure here
   </div>
</div>

//In you .ts file : 

checkForData(goal){
   //logic to check if the object has any data;
   //returns true or false
}

编辑::更改div结构：

<div *ngFor="let goal of goals">
<div class="col-xs-4 goal-container" *ngIf="checkForData(goal)">
   <div>
   #Goal structure here
   </div>
</div>
</div>

Answer 2

在这种情况下你可以使用* ngIf

<div class="col-xs-4 goal-container" *ngFor="let goal of goals" *ngIf="goals.length >0">
   #Goal structure here
</div>

所以当list列为空时div将从视图中删除。