代码之家 › 专栏 › 技术社区 › James Delaney

如何动态地从数组中删除和返回两个项?

typescript angular javascript

James Delaney · 技术社区 · 6 年前

我有两个按钮和一个数组。

按钮“或”和按钮“和”以及一个包含7项的数组(下拉列表)。

当用户单击“或”按钮时,应该从数组中删除2个项。

但当用户点击“和”按钮时,应该有最初的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;

1 回复 | 直到 6 年前

Vicky Kumar 6 年前

正如我从你的问题中了解到的,你有下面的数组

[
    {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'}
]

现在在事件中,当您需要较大的数组时,添加动态部分并使用;当您需要较小的数组时,只需使用静态部分

要添加动态部件,请尝试此代码

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

拼接的第一个参数表示在第四个位置发生变化第二个参数指示要为我们删除多少项为0 其他表示要插入的项 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice 阅读有关拼接的更多信息