Why idField is undefined in ng-multiselect-dropdown in angular6?

I have angular app in which i have ng-multiselect-dropdown. To provide list to dropdown i am getting services from an api inside of ngOnInit like this

selectedOfferedServices: IDropdownSettings = {};

ngOnInit(){
   this.getServices();
   this.selectedOfferedServices = {
     singleSelection: false,
     idField: 'id',
     textField: 'deliveryTypeName',
     selectAllText: 'Select All',
     unSelectAllText: 'UnSelect All',
     itemsShowLimit: 2,
     allowSearchFilter: false
   };
} 

And inside my template i have a condition of *ngIf and upon getting the true inside of *ngIf expression this ng-multiselect-dropdown is shown. When user selects any option from normal select dropdwon in my template so this expression becomes true and then this ng-multi-select-dropdown is shown.

<div class="row" *ngIf="transporterOtherDetails === 'yes'">
    <div class="col-3">
      <div class="form-group">
          <label>Offered Services</label>
          <ng-multiselect-dropdown [placeholder]="'Select services'" [data]="deliverytypes"
          [(ngModel)]="selectedServices" [ngModelOptions]="{standalone: true}"
          [settings]="dropdownSettings">
        </ng-multiselect-dropdown>
      </div>
    </div>
</div>

But the problem here is that when i select option from normal dropdown in my template so this ng-multi-select-dropdown shows but in console error is coming like this

ERROR TypeError: Cannot read property 'idField' of undefined at ng-multiselect-dropdown.js:189

can any one let me know that what’s the issue with this?

Source: Angular Questions