2017-04-04 61 views
0

我想刪除這取決於他們的ID陣列郵局(也將是selectes所需元素的複選框,它將使用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); 
} 
+0

您需要閱讀的indexOf(的資料),意識到這不是你應該使用的方法,然後找到了另一種方法,會做你想做的,並閱讀findIndex()的文檔。 HTTPS://developer.mozilla。org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex –

回答

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

你可以閱讀更多關於JavaScript的.filter()方法,以及支持的瀏覽器,在MDN Documentation Page for filter

filter()方法創建一個新陣列,其所有元素都通過 測試由提供的功能執行。

我重新分配this.postOffices = this.postOffices.filter(...)因爲:

filter()不發生變異其所稱爲數組。

注:我改變你的類型從PostOfficeany爲Plnkr因爲我很懶,不想重建該示例的模型,但它應該工作無論哪種方式。 :)

UPDATE

要回答Narjes本Slimen的問題的第二部分,並進一步說明.filter()方法的用法與「刪除隊列」:

「將會有數組中每個元素旁邊的複選框應該怎麼做 我這樣做,這個刪除功能只適用於選定的元素? 我應該添加一些東西到按鈕? -OP

可以創建一個「刪除」隊列,用於在用戶決定從列表中「刪除」它們以後存儲對象/標識。過濾器方法可以與子循環機制一起使用,根據刪除隊列中存在的項目從主列表中刪除項目。

例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

+0

該數組的每個元素旁邊都會有一個複選框,我應該怎麼做才能使這個刪除函數僅適用於所選元素?我應該添加一些東西到按鈕? –

+0

@NarjesBenSlimen您需要添加某種'刪除隊列'來存儲保存的郵局對象/ ids,直到用戶選擇刪除它們。然後在'.filter()'方法中,你可以遍歷隊列並相應地刪除。下面是一個讓您開始的Plnkr示例:http://plnkr.co/edit/ULKKQthP3y6wBQszDISo?p=preview –