Question

我有一个Angular App，我想为div元素添加一个删除按钮，我目前有一个添加按钮，如下所示：

ts文件。

uploads = [];

 addUp() {
    this.uploads.push(this.uploads.length);
  }

我尝试过

removeUp() {
        this.uploads.remove(this.uploads.length);
      }

此代码如下链接到此按钮：

<button class="btn" (click)="addUp()">Add</button>

HTML

    <div class="col" *ngFor="let upload of uploads">
       <h2>Upload</h2>
    </div>

我将如何删除版本？

Answer 1

您不能使用函数remove从数组中删除项目。

splice 从数组中删除对象

要从数组中删除元素，应使用splice：

removeUpload(uploadItem) {
    // get index/position of uploadItem within array
    const index: number = this.uploads.indexOf(uploadItem);

    // if index returned is negative it means element not found in array
    // else: (positive) index can be used 
    // e.g. to remove the single element at this position
    if (index !== -1) {
      this.uploads.splice( index, 1 );
    }
}

这将从索引位置中删除一个元素（因此第二个参数为1）。

当然，您必须将参数upload添加为按钮的单击事件的参数，以便函数知道必须删除数组的哪个元素：

<button class="btn" (click)="removeUpload( upload )" title="remove this">x</button>

请参见demo on stackblitz。

快捷方式

如果要删除数组的 first 元素，请使用array。shift()。如果要删除数组的 last 元素，请使用array。pop()。这两个函数都返回删除的元素。

要从阵列中添加/删除什么？

我不确定为什么要在push数组中添加/删除（splice和uploads）数组的长度。数组是否存储自身的当前大小，还是存储上载对象？

另请参见

A: remove item from stored array in angular 2

Answer 2

如果我正确理解，您将尝试实现相同的按钮实现，只是使用remove方法。

使用：<button class="btn" (click)="removeUp()">Remove</button>

还要更改removeUp方法以使用splice而不是remove：

removeUp() {

   this.uploads.splice(this.uploads.length, 1)

}

看看这里有一个类似的问题Similar question

我想在我的Angular应用中添加一个删除按钮

2 个答案:

splice 从数组中删除对象

快捷方式

要从阵列中添加/删除什么？

另请参见