從數組中刪除新添加的元素的問題

Question

好吧，讓我解釋一下我的問題是什么：

這是我的組件類 ：

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];
}