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

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 方法。

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

并且还将removeUp方法更改为使用splice而不是remove：

removeUp() {

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

}

看看这里回答的类似问题Similar question

Answer 2

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

拼接从数组中移除一个对象

要从数组中删除元素，您应该使用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 数组。数组是存储自身的当前大小还是upload-item-objects？

另见

A: remove item from stored array in angular 2