使用Angular2中的过滤器从列表中删除元素

Question

通过Angular 2，我通过一个list元素显示一个数组，该元素在每个元素旁边有一个名为Remove的按钮，它通过一个函数来操作，该函数使用.filter（）来删除相应的元素。但是在单击此按钮并尝试向数组添加元素之后，数组将恢复到它的旧自身，并添加新元素，但list元素不会修改。

在这里，我将附加组件，服务和HTML中的部分，该部分负责删除项目

组件片段

    remove(item: List) {
    this.list = this.listService.remover(this.list, item);
    localStorage.setItem('lists', JSON.stringify(this.list));
}

服务片段

    remover(listArray: List[], list: List) {
    const listArray1 = listArray.filter(item => item.id !== list.id);
    return listArray1;
}

HTML（模板）片段

<div>
    <li *ngFor="let item of list">
      <!-- {{checkItem(item)}} -->
      <div *ngIf="checkItem(item)">
        <input type="checkbox" class="stat" (click)="status(item)" [(checked)]="item.status" />
        <span class="task">{{item.task}}</span>
        <button class="listBtn" (click)="edit(item)">EDIT</button>
        <button class="listBtn" (click)="remove(item)">REMOVE</button>
      </div>
    </li>
  </div>

Answer 1

试试这个。

html

<div>
    <li *ngFor="let item of list; let i = index;">
      <!-- {{checkItem(item)}} -->
      <div *ngIf="checkItem(item)">
        <input type="checkbox" class="stat" (click)="status(item)" [(checked)]="item.status" />
        <span class="task">{{item.task}}</span>
        <button class="listBtn" (click)="edit(item)">EDIT</button>
        <button class="listBtn" (click)="remove(item, i)">REMOVE</button>
      </div>
    </li>
  </div>

component

remove(item: List, index) {
    this.list.splice(index, 1);
    localStorage.setItem('lists', JSON.stringify(this.list));
}

不需要任何服务