时间戳

首页 > 解决方案 > 无法抓住执行填充 Angular 4 中数组的函数的好时机

javascript - 无法抓住执行填充 Angular 4 中数组的函数的好时机

问题描述

我正在研究一些模式，有“规则”部分。你可以在那里设置你想要的规则。

看起来像这样： 在此处输入图像描述

还有那个“添加规则”按钮，您可以单击该按钮并获取新的“要设置的规则”。

这是单击“添加规则”按钮的结果： 在此处输入图像描述

现在你有了“规则运算符”，它们是按钮：“OR”、“AND”和“EXCLUDE”： 在此处输入图像描述

根据您在规则下拉选项中选择的“按钮”将有所不同/更改。

这就是为什么我需要为每个规则为该下拉列表提供一个数组“副本”的原因。

如果您在规则 2 中选择 -> 下拉菜单中的“或”运算符，则将是不同的选项。问题在于数组在同一个内存中，并且在规则 1 的下拉列表中也进行了更改。

为了避免这种情况，我想让每个规则都有自己的数组副本。

该规则部分是由 for 循环创建的，每次单击“添加规则”时，rules.array 将增加一个，并且我们将在那里“呈现新规则”。

“规则”数组的初始值为 1。当您单击“添加规则”时，将有 2。

我使用该数组遍历她，并为每次迭代创建新的“数组索引”。这意味着如果我们有 2 条规则，我们将有一个带有两个索引（数组）的数组。

主要问题出在 Typescript 中：在 updateAudienceRulesList() 函数中，当您单击“新规则”时，因为 this.audienceDto.rules.length 为空。一开始，该数组的值为 1，默认情况下，您有一个规则。 

@Input() audienceDto: AudienceDtoData;
@Input() parentForm: NgForm;

public ruleOperatorArray = RULE_OPERATOR_ARRAY;
public audienceRulesTypesList = [];

constructor() {
}

ngOnInit() {
    this.updateAudienceRulesList();
}

updateAudienceRulesList() {
    for (let i = 0; i < this.audienceDto.rules.length; i++) {
        console.log(i);
        this.audienceRulesTypesList[i] = RULE_ARRAY;
    }
}

onSelectRuleOperator(ruleOperator, value, i) {
    ruleOperator = value;
    this.audienceRulesTypesList[i] = ruleOperator === 'OR' ? RULE_ARRAY_WITHOUT_GEO_RULES : RULE_ARRAY;
}

这是 rules.component 的 HTML： 

<div *ngFor="let rule of audienceDto.rules; let i = index"
 class="nano-f-r nano-rule-wrapper">
<hr>
<div class="nano-label">
    <span class="nano-m-05">
        Rule {{ i + 1 }}
    </span>
</div>
<div class="nano-f-c nano-f">

    <div *ngIf="i > 0"
         class="nano-f-r nano-f-30" style="margin-bottom: 5px;">
        <label *ngFor="let ruleOperator of ruleOperatorArray"
               [class.active]="rule.ruleOperator === ruleOperator.value"
               (click)="rule.ruleOperator = ruleOperator.value"
               (click)="onSelectRuleOperator(rule.ruleOperator, ruleOperator.value, i)"
               class="nano-radio-button">
            <span>
                {{ ruleOperator.name }}
            </span>
        </label>
    </div>

    <div class="nano-f-r nano-f-30">
        <nano-drop-down [arrayOfOptions]="audienceRulesTypesList[i]"
                        [selectedOptions]="rule.ruleClass"
                        (selectedOptionsChange)="rule.onRuleChange($event)">
        </nano-drop-down>
        <div (click)="audienceDto.removeRule(i)"
             class="nano-f-r nano-f-30 nano-bc-ws hover-effect nano-c-p nano-ml-2">
            <i class="fa fa-times nano-m-a"></i>
        </div>
    </div>

标签： javascriptarraysangulartypescript

解决方案

推荐阅读