Question

我想从数组中删除PostOffices，具体取决于它们的ID（将会有一个选中所需元素的复选框，并且它将使用其id作为删除功能）

****here is the array 

let postOffices = [
                {postOfficeID: 15, postCode: '3006', postOfficeNameFR:                    'TunisPost', assignedAgentFirstName: 'BEN JEMAA',                       assignedAgentName: 'Radhia', assignedAgentLogin:                          'POABR'},
                {postOfficeID: 16, postCode: '2086', postOfficeNameFR:                    'SoussePost', assignedAgentFirstName: 'SAMTI',                            assignedAgentName: 'Achref', assignedAgentLogin:                          'POASA'}
            ];

 ***here is the delete service that I tried to create 


            deletePostOffice(postOffice:PostOffice)
{

    this.postOffices.splice(this.postOffices.indexOf(this.postOffice.postOfficeID),1);
}

Answer 1

任何简单的方法都只是使用JavaScript数组.filter()方法来比较postOfficeID属性和/或您想要过滤的任何其他属性。

示例＃1：

  deletePostOffice(postOffice: PostOffice): void {
      this.postOffices = this.postOffices.filter((_office: PostOffice) => {
        // Return false (e.g. do NOT filter this object out) if the Ids don't match
        return (_office.postOfficeID !== postOffice.postOfficeID);
      });
  }

Working Plunker

您可以在MDN Documentation Page for filter

上详细了解JavaScript .filter()方法以及支持的浏览器

filter()方法创建一个包含所有传递元素的新数组由提供的函数实现的测试。

我正在重新分配this.postOffices = this.postOffices.filter(...)因为：

filter()不会改变调用它的数组。

注意：我为Plnkr将您的类型从PostOffice更改为any因为我很懒，并且不想为示例重建模型，但是它应该以任何方式工作。：）

更新

回答Narjes Ben Slimen的问题的第二部分，并进一步说明使用“删除队列”的.filter()方法的用法：

“数组的每个元素旁边都会有一个复选框我这样做这个删除功能只适用于选定的元素？我应该在按钮上添加一些内容吗？“ - OP

可以创建“删除”队列，当用户决定从列表中“删除”它们时，该队列存储对象/ ID。然后，可以结合子循环机制使用过滤器方法，根据它在删除队列中的存在，从主列表中删除项目。

示例＃2：

  deletePostOffices(): void {
      this.postOffices = this.postOffices.filter((_office: any) => {
        // Typing this long-hand for easier understanding
        let _keep = true;

        this.deleteQueue.forEach((_deleteOffice: any) => {
          if (_office.postOfficeID === _deleteOffice.postOfficeID) {
            _keep = false;
          }
        });

        return _keep;
      });

      // Clear the queue because the 'deleted' post offices no longer exist
      this.deleteQueue = [];
  }

<强> Working Plnker For Example 2

删除服务打字稿

1 个答案: