выпадающее значение angular2-query-builder не сбрасывается / обновляется

Question

У меня проблема с изменением раскрывающегося значения, когда меняется соответствующее поле, оно все еще показывает те же данные или, скажем, данные, которые инициализируются первыми. Эта проблема возникает, только когда я использую пользовательские компоненты или просто какие-либо изменения, такие как тег "select" для имитации раскрывающегося списка.

Это запрос и конфигурация, которые я предоставил

  query = {
    condition: "and",
    rules: [
      { field: "age", operator: "Equal to", value: "young" },
      { field: "gender", operator: "<=", value: "m" },
      {
        condition: "or",
        rules: [
          { "field": "age", "operator": "<", "value": "old" }
        ]
      }
    ]
  }

  //-------------------------------
  config: QueryBuilderConfig = {
    fields: {
      age: {
        name: 'Age',
        value: "age",
        type: 'category',
        operators: ["=", "<=", ">"],
        options: [
          { name: 'Young', value: 'young' },
          { name: 'Old', value: 'old' }
        ]
      },
      gender: {
        name: 'Gender',
        value: "gender",
        type: 'category',
        operators: ["=", "<=", ">"],
        options: [
          { name: 'Male', value: 'm' },
          { name: 'Female', value: 'f' }
        ]
      }
    }
  }

<section class="custom-query-builder">

  <query-builder [(ngModel)]='query' [config]='config' #addNewRule>

    <ng-container
      *queryButtonGroup="let ruleset; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet">

      <div class="add-ruleset btn__action--class" (click)="addRuleSet()">
        <app-svg [name]="'add-circular'"></app-svg>
        <div>Group</div>
      </div>

      <div class="add-rule btn__action--class" (click)="addRule(); consoleElement(addNewRule)">
        <app-svg [name]="'add-circular-empty'"></app-svg>
        <div>Rule</div>
      </div>

      <!--<button type="button" (click)="removeRuleSet()">- Ruleset</button> -->
    </ng-container>

    <ng-container *queryRemoveButton="let rule; let removeRule=removeRule;">

      <div class="remove-rule btn__action--class" (click)="removeRule(rule)">
        <app-svg [name]="'minus'"></app-svg>
        <div>Remove</div>
      </div>
    </ng-container>

    <!--col name-->
    <ng-container *queryField="let rule; let fields=fields; let onChange=onChange">
      <div class="query__filed">
        <div class="query__label">Column Name</div>
          <select [(ngModel)]="rule.field">
            <option *ngFor="let opt of fields">{{opt}}</option>
          </select>
        </div>
    </ng-container>

    <!--col filter-->
    <ng-container *queryOperator="let rule; let operators=operators; let onChange=onChange">
      <div class="query__filed">
        <div class="query__label">Filter</div>
        <select [(ngModel)]="rule.operator">
          <option *ngFor="let opt of operators">{{opt}}</option>
        </select>
      </div>
    </ng-container>

    <!--col label-->
    <ng-container *queryInput="let rule; let field=fields; let options=options; type: 'category'">
      <div class="query__filed">
        <div class="query__label" (click)="options">Value</div>
      <select [(ngModel)]="rule.value">
        <option *ngFor="let opt of options">{{opt}}</option>
      </select>
      </div>

    </ng-container>

  </query-builder>
</section>



<div class="output">{{query | json}}</div>
<!-- <div class="generate__code" (click)="generateWhereCode()">generateCode</div> -->
<!-- <div class="generated__code" *ngFor="let ele of codeDataTemp;let i = index">
  <div>{{i+1}}. {{ele}}</div>
</div> -->