angular - 从打字稿中的对象数组中删除元素的问题

Question

我正在尝试永久删除此对象数组的一个元素：

 playlists: object[] = [
        { title: 'Ejemplo 1', songs: [ 'cancion1', 'cancion2', 'cancion3'] },
        { title: 'Ejemplo 2', songs: [ 'cancion1', 'cancion2', 'cancion3' ] }
  ];

我尝试过使用 splice 方法，但是当我刷新网页时，它再次出现：

deletePlaylist( index: number){

      this.playlists.splice(index, 1);

  }

这里的索引来自哪里：

<div *ngFor="let playlist of playlists; let i = index" class="card text-white bg-success m-3 animated fadeIn" style="max-width: 18rem;">
        <div class="card-header">{{ playlist.title }}</div>
        <div class="card-body">
            <h5 class="card-title">{{ playlist.title }}</h5>
            <ul *ngFor="let song of playlist.songs" class="card-text">
                <li>{{ song }}</li>
            </ul>
            <div class="row">
                <div class="col text-right">
                    <button (click) = "deletePlaylist( i )" class="btn btn-danger text-left" ><i class="fas fa-trash"></i></button>
                </div>
            </div>
        </div>
    </div>

有任何想法吗？

标签： angulartypescript

Answer 1

通过刷新您的网页，您将失去应用程序的任何当前状态。该组件再次使用包含 2 个项目的播放列表数组创建。如果您想在刷新网页时跟踪数据更改，则需要对其进行持久化。