从数组中删除新添加的元素的问题

Question

好的，让我解释一下我的问题是什么：

这是我的组件 class :

export class DataArray implements OnInit {
    private data: string[] = [];
    addData(msg: string) {
        this.data.push(msg);
    }
    deleteMsg(index: number) {
        console.log(" that is my element which i when to remove data[index]=" + this.data[index]);
        this.data.splice(index, 1);
    }
}

这只是两种方法：一种是在我的字符串数组中添加新元素和一个从我的数组中删除元素。

和我的组件HTML

<div class="row" *ngFor="let element of data;let i = index">
    {{element}}
    <button class="btn btn-md btn-success" (click)="addData(element)">ADD ELEMENT
    </button>
    <button class="btn btn-md btn-danger" (click)="deleteMsg(i)">Remove ELEMENT
    </button>
</div>

函数 addData 工作正常，函数 deleteMsg 也正常，但是当我尝试删除一个新添加的元素时，困境就来了，我无法删除它，它保留在数组数据中。

如果有人能提出解决方案，那对我很有用。

Answer 1

试试这个

deleteMsg(index:number)
{
  this.data.splice(index, 1);
  this.data = [...this.data];
}

从数组中删除新添加的元素的问题

Issue with removing newly added element from array

javascript

arrays

angular

ngfor

array-splice