如何通过单击按钮来制作元素```'':无

Question

我想在使用Angular 2构建的应用程序中单击按钮时实现一个函数以隐藏元素。

<div *ngFor="let todo of todos" class="col-sm-8 col-sm-offset-2">
  <div class="panel panel-default step"> // from here
      <div class="panel-body">
        <a [routerLink]="['/todo', todo.id]">{{todo.title}}</a>
        <button (click)="delete(todo.id)" type="button" class="btn btn-success btn-circle pull-right"><i class="glyphicon glyphicon-ok"></i></button>
      </div>
  </div>//so far
</div>

使用上面的代码单击按钮时，我想知道如何使Todo消失。尽管这是一个基本问题，请教导。

Answer 1

您应该删除如下

的待办事项

delete(id:number){
    this.todos.splice(id,1)
}

Answer 2

aravinds答案的小更改很小，因为我们需要找到todo的索引，因此将删除正确的todo

我喜欢通过删除中的对象：

(click)="delete(todo)"

需要查找todo的索引，然后是splice。

delete(todo) {
  this.todos.splice(this.todos.indexOf(todo),1);
}

---

更新：

只是意识到您似乎只想 hide todo，而不是完全删除它。好吧，这可以通过以下内容实现。初始化时，所有托多都可以看到。当我们想隐藏它时，我们可以为todo引入一个新变量。因此，最初不存在此属性，因此我们在迭代中标记：*ngIf="!todo.hidden"，完成代码：

<div *ngFor="let todo of todos">
  <div class="panel-body" *ngIf="!todo.hidden">{{todo.name}}
    <button (click)="hide(todo)" type="button">Hide Todo</button>
  </div>
</div>

和隐藏功能将hidden属性设置为true：

hide(todo) {
  todo.hidden = true;
}

这显然并没有给出实际上丢失的选项，但这在您的问题中没有提及。

Answer 3

我认为这不是'删除'todo列表上的元素的正确方法。@Aravind答案对此更好。

但是，如果您真的想使用display:none，则可以这样做：

https://plnkr.co/edit/exwawweh9n6resqpzfcq?p=preview

<element ng-style="displayStyle"></element>
<button value="displayNone" ng-click="displayStyle={'display':'none'}">Display none</button>