javascript - Hur man ställer in alternativet för en rullgardinslista med den andra

Jag har ett konstigt problem med min kod. Det finns inget fel eller varning. Den visar oväntat beteende. Jag har en widget där det finns två rullgardinslistor, en är primär och den andra kallar jag sekundär. Idén är att jämföra försäljningen för detta år, kvartal eller sprint med föregående år, kvartal eller sprint. Det betyder att år ska jämföras med år, kvartal med kvartal, och så vidare. Här är skärmdumpen:

Se, om jag väljer ett alternativ från den primära rullgardinsmenyn, bör samma alternativ också väljas i den sekundära. Men motsatsen är inte sann. Båda får alternativ från samma array. Förutom att de sekundära alternativen är försedda med prefixet Previous. Det är min organisations kod men jag tror det är okej att dela med alla här.

Anta:

  1. dls-dropdown är en select-tagg i HTML
  2. dls-option är en option-tagg i HTML
  3. dls-label är en p-tagg i HTML (inte viktigt, ignorera denna tagg)

Här är min implementation:

timeselector.component.html

<dls-dropdown [(ngModel)]="primaryMode" (ngModelChange)="changeReferenceState($event)">
  <dls-option *ngFor="let mode of modes" [value]="mode" (click)="$event.stopPropagation();">
    {{ mode }}
  </dls-option>
</dls-dropdown>

<dls-dropdown [(ngModel)]="secondaryMode" name="source">
  <dls-option *ngFor="let mode of modes" [value]="mode" (click)="$event.stopPropagation()">
    {{ mode }}
  </dls-option>
</dls-dropdown>

timeselector.component.ts

import { ... } from '@angular/core';
...

@Component({
    selector: 'app-timeselector',
    templateUrl: './timeselector.component.html'
})
export class TimeselectorComponent implements OnInit {

    modes = ['Year', 'Quarter', 'Sprint'];

    primaryMode;
    secondaryMode;

    constructor() {}


    changeReferenceState(e) {
        console.log("changed: " + e);
        this.secondaryMode=this.primaryMode;
        this.changeDetector.detectChanges();
        console.log("secondary: "+this.secondaryMode);
    }

    /* tried using call back also
      somethingChanged(e, callback){ 
        console.log("changed: " + e);
        this.secondaryMode=this.primaryMode;
        console.log("secondary: "+this.secondaryMode);
        callback(); 
        } 
    */    

    ngOnInit(): void {  
    }
}

Jag har noggrant gått igenom olika innehåll:

  1. (change) vs (ngModelChange) i Angular
  2. Försökte också använda callback-funktion
  3. Förståelse av strategi för ändringsdetektion i Angular

Jag skapade en stackblitz och överraskande nog fungerar exakt samma logik med grundläggande select och options-taggar. Men med mitt företags taggar fungerar det inte. På konsolen får jag dock korrekt output:

Men på front-end uppdateras det ibland och ibland inte. Det står inget om detta i dokumentationen för vårt företags komponent. Snälla hjälp mig. Är mitt företags designramverk ansvarigt för detta?