When i load data for first time dropdown do not show selected value. But when we navigate from second tab to first tab it loads all the values correctly.
Also if I call LoadData method twice from parent component it loads all the data correctly
This looks like a sync issue and I have no clue on how to solve it.
Note: I am using Child component inside TabItem
Parent (Has TabItem)>Clild(LoadData Method)
I have below code:
Parent component :
HTML:
<div class="flex-grow-1 row responsive-height">
<div class="col-12 height-93">
<ejs-tab #tabMenu (selected)="selected($event)">
<e-tabitems class="pt-2 ml-4">
<e-tabitem>
<ng-template #headerText>
<div> {{ 'MasterData.ComponentTitle'| translate }} </div>
</ng-template>
<ng-template #content>
<app-master-data #masterDataTab (_masterDataChanged)="onDataChange($event)"
(_isMabesMapping)="onMasterDataLoaded($event)" (_masterDataLoaded)="onDataLoad($event)"></app-master-data>
</ng-template>
</e-tabitem>
</e-tabitems>
</ejs-tab>
.Ts File:
Loading child component data from parent component :
public loadCurrentTabData(selectedIndex: number): void {
switch (selectedIndex) {
case 0: this.masterDataTab?.loadData(this.currentPart.idPartMaterialNumber);
Child component:
HTML:
<ejs-dropdownlist #masterDataProducerCostCenter id="masterDataProducerCostCenter"
placeholder="{{ 'MasterData.ProducerCostCenter' | translate }}"
[dataSource]="producerCostCenterDropdownList" [fields]="producerCostCenterDropdownFields"
[(ngModel)]="masterData.producerCostCenterId" (ngModelChange)="dataChanged()">
</ejs-dropdownlist>
.Ts File:
Load method which loads data in all dropdown
public loadData(partId: number, count = 1): void {
this.loading = true;
this._masterDataService.getMasterDataByPartId(partId).subscribe(result => {
this.loading = false;
this.masterData = result;
this.initializeView();
this._masterDataLoaded.emit(true);
this._toastService.pop('success', this._translatePipe.transform('Services.MasterData'), this._translatePipe.transform('MasterData.Loaded'));
}, err => {
this.loading = false;
if (err.status === 401 || err.statusText === 'Unauthorized') {
this.loading = true;
this._errorService.handleAuthorize(this._translatePipe.transform('Services.MasterData'));
if (count === 1) {
this._utilService.delay().then(() => {
console.log('Wait 5 Seconds!');
this.loadData(partId, count + 1);
});
}
} else {
this._errorService.handleErrorCode(err, this._translatePipe.transform('Services.MasterData'));
}
});
}
