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

我认为这不是删除＆＃39;的正确方法。待办事项列表中的元素。 @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>

Answer 3

Aravinds的小改动回答，因为我们需要找到todo的索引，以便删除右todo

我喜欢在delete中传递对象：

(click)="delete(todo)"

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

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

更新

刚才意识到你似乎只想隐藏 todo，而不是完全删除它。那么这可以通过以下方式实现。初始化后，所有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>

hide函数将hidden属性设置为true：

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

这显然没有提供实际取消隐藏待办事项的选项，但您的问题中未提及。

如何通过单击按钮使元素`display：none`

3 个答案:

更新