Question

我正在学习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);
  }

Answer 1

将商品索引传递到splice并指定要删除的一项：

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

有关演示，请参见this stackblitz。

Answer 2

在点击功能上，发送要删除的对象

<li *ngFor="let toDo of toDoList" (click)="removeFromList(toDo)">{{ toDo }}</li>

然后在您的函数中，找到元素的索引，然后使用splice将其删除

removeFromList(addedItem) {
    var index = this.toDoList.indexOf(addedItem);

    this.toDoList.splice(index, 1); // Removes one element, starting from index
}

Answer 3

Splice将按索引（以及要删除的项数）而不是按值从数组中删除项。

要使用数组和集合，我建议使用https://underscorejs.org/，因为我知道这可能会解决这个问题，但是对于更复杂的情况将很有用。

您可以通过运行以下命令将库添加到角度项目中：

npm i underscore --save

您可能还想通过运行以下命令添加类型：

npm i @types/underscore --save-dev

您的app.component.ts看起来像

import { Component } from '@angular/core';
import * as _ from 'underscore';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'to-do-list-app';
  listItem = '';
  toDoList = [];

  addToList() {
    this.toDoList.push(this.listItem);
  }
  removeFromList(addedItem) {
    this.toDoList = _.without(this.toDoList, addedItem);
  }
}

您的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(toDo)">{{ toDo }}</li>
</ul>

角度-单击该项目即可从数组中删除该项目

3 个答案: