如何動態刪除並轉回數組中的兩個項目？

Question

我有兩個按鈕和一個數組。

按鈕“ OR”和按鈕“ AND”以及一個具有7個項的Array（Dropdown）。

當用戶單擊“或”按鈕時，應從陣列中刪除2個項目。

但是，當用戶單擊“ AND”按鈕時，應該有最初的7個項目。

我會嘗試動態添加和刪除數組中的兩個項目。 哪種最佳實施方式？

這是按鈕的HTML（ruleOperator）：

<label *ngFor="let ruleOperator of ruleOperatorArray"
       [class.active]="rule.ruleOperator === ruleOperator.value"
       (click)="rule.ruleOperator = ruleOperator.value"
       class="nano-radio-button">
    <span>
        {{ ruleOperator.name }}
    </span>
</label>

這是下拉列表，並且在同一頁面上帶有按鈕：此“ arrayOfOptions”是我需要從中添加/刪除該項目的數組。

<nano-drop-down [arrayOfOptions]="audienceRuleTypes"
                [selectedOptions]="rule.ruleClass"
                (selectedOptionsChange)="rule.onRuleChange($event)">
</nano-drop-down>

該數組的外觀如下：

export const RULE_ARRAY = [
    {value: 'SimplePixel', name: 'Simple Pixel Call'},
    {value: 'SearchTerms', name: 'Search Terms'},
    {value: 'DataPartner', name: 'Data Partner'},
    {value: 'Category', name: 'Category Rule'},
    {value: 'GeoCountry', name: 'Geo Location Country'},
    {value: 'GeoCity', name: 'Geo Location City'},
    {value: 'ImpressionAdvertiser', name: 'Advertiser (Viewer)'},
    {value: 'ImpressionCampaign', name: 'Campaign (Viewer)'},
    {value: 'ClickAdvertiser', name: 'Advertiser (Clicker)'},
    {value: 'ClickCampaign', name: 'Campaign (Clicker)'},
    {value: 'ConversionAdvertiser', name: 'Advertiser (Buyer)'},
    {value: 'ConversionCampaign', name: 'Campaign (Buyer)'}
];   
public audienceRuleTypes = RULE_ARRAY;

Answer 1

據我從您的問題中了解到的是

[
    {value: 'SimplePixel', name: 'Simple Pixel Call'},
    {value: 'SearchTerms', name: 'Search Terms'},
    {value: 'DataPartner', name: 'Data Partner'},
    {value: 'Category', name: 'Category Rule'},
    {value: 'GeoCountry', name: 'Geo Location Country'},
    {value: 'GeoCity', name: 'Geo Location City'},
    {value: 'ImpressionAdvertiser', name: 'Advertiser (Viewer)'},
    {value: 'ImpressionCampaign', name: 'Campaign (Viewer)'},
    {value: 'ClickAdvertiser', name: 'Advertiser (Clicker)'},
    {value: 'ClickCampaign', name: 'Campaign (Clicker)'},
    {value: 'ConversionAdvertiser', name: 'Advertiser (Buyer)'},
    {value: 'ConversionCampaign', name: 'Campaign (Buyer)'}
]; 

在某些情況下，您希望刪除第5個和第6個元素，因此結果數組將是

[
    {value: 'SimplePixel', name: 'Simple Pixel Call'},
    {value: 'SearchTerms', name: 'Search Terms'},
    {value: 'DataPartner', name: 'Data Partner'},
    {value: 'Category', name: 'Category Rule'},
    {value: 'ImpressionAdvertiser', name: 'Advertiser (Viewer)'},
    {value: 'ImpressionCampaign', name: 'Campaign (Viewer)'},
    {value: 'ClickAdvertiser', name: 'Advertiser (Clicker)'},
    {value: 'ClickCampaign', name: 'Campaign (Clicker)'},
    {value: 'ConversionAdvertiser', name: 'Advertiser (Buyer)'},
    {value: 'ConversionCampaign', name: 'Campaign (Buyer)'}
]; 

為此，我建議保持兩個這樣的數組

export const STATIC-PART = [
    {value: 'SimplePixel', name: 'Simple Pixel Call'},
    {value: 'SearchTerms', name: 'Search Terms'},
    {value: 'DataPartner', name: 'Data Partner'},
    {value: 'Category', name: 'Category Rule'},
    {value: 'ImpressionAdvertiser', name: 'Advertiser (Viewer)'},
    {value: 'ImpressionCampaign', name: 'Campaign (Viewer)'},
    {value: 'ClickAdvertiser', name: 'Advertiser (Clicker)'},
    {value: 'ClickCampaign', name: 'Campaign (Clicker)'},
    {value: 'ConversionAdvertiser', name: 'Advertiser (Buyer)'},
    {value: 'ConversionCampaign', name: 'Campaign (Buyer)'}
]; 

export const DYNAMIC-PART = [
    {value: 'GeoCountry', name: 'Geo Location Country'},
    {value: 'GeoCity', name: 'Geo Location City'}
]

現在，當您需要更大的數組時，添加DYNAMIC-PART並使用，而當您想要較小的數組時，只需使用靜態部分

要添加動態部件，請嘗試以下代碼

const z = STATIC-PART.splice(4, 0, DYNAMIC-PART[0], DYNAMIC-PART[1]);

要拼接的第一個參數指示在第4位更改。第二個參數指示對我們來說要刪除多少個項目，其余為0，其余則指示要插入的項目https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/參考/ Global_Objects / Array / splice進一步了解splice