Javascript 无法捕捉到执行填充数组的函数的良好时机

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

看起来是这样的：

还有一个“添加规则”按钮，您可以在上面单击并获得新的“要设置的规则”

这是单击“添加规则”按钮的结果：

现在您有了“规则运算符”，即按钮：“或”、“和”和“排除”：

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

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

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

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

该规则部分由for循环生成，每次单击“添加规则”时，rules.array将增加一个，在那里我们将“呈现新规则”

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

我使用这个数组来循环遍历她，每次迭代我都会创建新的“索引，即数组”。这意味着如果我们有两条规则，我们将有一个数组和两个索引（数组）

主要问题在类型脚本中：在UpdateAudienceTruesList（）函数中，单击“新建规则”时，cus this.audencedto.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;
}

@Input（）audencedto:audencedtodata；
@Input（）父窗体：NgForm；
公共规则运算符数组=规则运算符数组；
公众听众类型列表=[]；
构造函数（）{
}
恩戈尼尼特（）{
this.updateAudienceRulesList（）；
}
updateAudienceRulesList（）{
for（设i=0；i

以下是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>

规则{i+1}
{{ruleOperator.name}

保留选项数组的一个版本，但克隆它并使用克隆来填充html选项，这样选项就不会改变，只会显示在哪里。@Shilly tnx for rply，好的，我会用这种方式尝试。