如何使用一个功能将更改应用于两个不同的输入字段[角度]

I'm new to Angular. I'm sorry I'm unable to frame the question properly. I'll try to explain here. I'm creating a performance comparing widget in Angular. It will compare performance of this Calendar year with Previous Calendar Year and this Year-to-date with Previous Year-to-date. I'll take care of all those mathematics. I've created a stackblitz also. But let me explain the code also. I have created two dropdowns using simple HTML select and option tags. And I've one more component app-monthpicker. This is what I mean:

enter image description here

这两个下拉列表都从打字稿的同一数组中读取选项:

modes = ['Calendar Year', 'Year to date'];

然后每个选项都有一个预定义的范围。

  1. 对于日历年,范围是“ 01-01-2020到12-31-2020”;
  2. 对于年初至今,范围是“ 01-01-2020到02-07-2020”;

These ranges are set in app-monthpicker. Let them be hard-coded for sometime.

现在,两个下拉列表都绑定了相同的变量。这是代码:

<div class="inner-panel">
  <h3>Time selection widget</h3>
  Primary:<br>
  <select [(ngModel)]="primaryMode" (change)="modeChangeHandler($event)">
    <option *ngFor="let mode of modes" [ngValue]="mode">{{mode}}</option>
  </select>
  <br><br>
  <app-monthpicker></app-monthpicker>
  <br><br>
  Secondary:<br>
  <select [(ngModel)]="secondaryMode" (change)="modeChangeHandler($event)">
    <option *ngFor="let mode of modes" [ngValue]="mode">Previous {{mode}}</option>
  </select>
  <br><br>
  <app-monthpicker></app-monthpicker>
</div>

这是我的方法modeChangeHandler:

@ViewChild(MonthpickerComponent, {static: false}) monthpicker: MonthpickerComponent;

constructor() {}

ngOnInit(): void {
}

modeChangeHandler() {
    if (this.primaryMode === this.modes[0] || this.secondaryMode === this.modes[0]) {
        this.initCalendarYear();
    } else if (this.primaryMode === this.modes[1] || this.secondaryMode === this.modes[1]) {
        this.initYearToDate();
    } else {
      console.log("Default case");
    }
}

initCalendarYear() {
    this.monthpicker.startRange = '01-01-2020';
    this.monthpicker.endRange = '12-31-2020';
}

initYearToDate() {
    this.monthpicker.startRange = '01-01-2020';
    this.monthpicker.endRange = '02-07-2020';
}

我的问题是,即使它们绑定到相同的变量,我的第二个下拉列表也不会更改值。它仍在更改上述输入字段的范围,而不是其自身。请纠正我。

评论