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/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice 阅读有关拼接的更多信息

如何动态删除阵列中的两项并返回它们？

1 个答案: