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

Question

通过Angular 2，我通过列表元素显示一个数组，该数组在每个元素旁边一个按钮旁边一个名为" remove"，它是通过使用.filter（）来删除该函数的函数各个元素。但是，在单击此按钮之后，尝试将元素添加到数组中，而数组还原到旧的自我，并添加了新元素，但是列表元素不会修改。

在这里，我将从组件，服务和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));
}

无需任何服务