角度反应形式控件setValue方法对于选择控件每次都不起作用

Question

描述

我遇到了angular反应式表单控件 setValue 方法mdb-select的奇怪问题。何时第一次绑定，然后工作正常。但是无论何时从 dataFilterService.widgetRequestObjectObservable 更新 kpisCaptionValues 变量对象，然后在我根据代码中的 kpisPreviewClick 方法从代码设置值之后。那就行不通了。在设置值时，我可以调试是否将正确的值传递给 currentSelectetKpi 表单控件，但是在 currentSelectetKpi.valueChanges.subscribe 值内部显示未定义。只是不知道为什么它变得不确定。如果有人遇到相同的问题，请与我分享。

组件代码

export class LineKpisChartComponent implements OnInit, OnChanges {      
    //local variable
    kpisCaptionValues: ValueLabelDictionary[] = [];

    //Form Controls 
    majorKpiForm: FormGroup;
    currentSelectetKpi: FormControl;

    ngOnInit() {     
        this.createFormControls();
        this.createForm();
        this.majorKpiForm.controls.currentSelectetKpi.valueChanges.subscribe(value => {
            //this.bindKpisChanges(); 
        });
    }

    ngOnChanges() {        
        // subscribe observable when filter changed
        this.widgetRequestSubscription = this.dataFilterService.widgetRequestObjectObservable            
            .subscribe(response => {                
                this.getLineKpisDetails();                
            });
    }

    getLineKpisDetails(){
        this.kpisCaptionValues = [];
        this.getLineKpisDetailsSubscription = this.analyticsDashboardService.getLineKpisDetails<AreaKpisResponseAreaKpiValue>(lineKpisRequest, this.lineKpisChartConfig.getKpisUrl).subscribe(response => {
            this.kpisCaptionValues = response.Kpis.map((currElement, index) => {
                return { value: index.toString(), label: currElement.caption };
            });
        }), error => {
            console.log("Error in 'getLineKpisDetails' method : " + error);
            this.dataExists = AnalyticsDataExists.NotExistsForLastThreeYears;
        }               
    }

    createFormControls() {
        this.currentSelectetKpi = new FormControl();
    }

    createForm() {
        this.majorKpiForm = new FormGroup({
            currentSelectetKpi: this.currentSelectetKpi
        });
    }

    kpisPreviewClick(index: number) {                
        this.majorKpiForm.controls.currentSelectetKpi.setValue(index.toString());
    }
}

HTML代码

<mdb-select formControlName="currentSelectetKpi" [options]="kpisCaptionValues" placeholder="Choose" class="border-bottom-none a-hoverable w-auto"></mdb-select>