时间戳

首页 > 解决方案 > Angular - 单击该项目从数组中删除项目

angular - Angular - 单击该项目从数组中删除项目

问题描述

我正在学习 Angular（具体来说是 v6），并尝试构建一个简单的待办事项列表。

我能够将项目添加到数组并显示在列表中，但无法弄清楚如何在单击该项目时删除特定项目。

当前代码在单击时删除整个数组。这是我的代码：

app.component.html

 <h1>To Do List</h1>
  <label for="">What do you need to to?</label>
  <input type="text" [(ngModel)]="listItem">
  <br>
  <button (click)="addToList()">Add</button>
  <hr>
  <ul>
    <li *ngFor="let toDo of toDoList" (click)="removeFromList($event)">{{ toDo }}</li>
  </ul>

app.component.ts

export class AppComponent {
  title = 'to-do-list-app';
  listItem = '';
  toDoList = [];

  addToList() {
    this.toDoList.push(this.listItem);
  }

  removeFromList(addedItem) {
    this.toDoList.splice(addedItem);
  }

标签： angular

解决方案

将项目索引传递给splice并指定要删除的一项：

<li *ngFor="let toDo of toDoList; let i = index" (click)="toDoList.splice(i, 1)">

请参阅此 stackblitz以获取演示。

推荐阅读