How to solve "of undefined" problem of a service?

Question

I am calling service in Angular7 at every dropdown option change. But when I change selected option on dropdown I am getting getAllByCountryId of undefined error.

Here is function that calling http service:

countryOnChange(countryId: Guid) {
    this.cityService.getAllByCountryId(countryId).subscribe(
      res => {
        if (res.code === ResponseCode.success) {
          res.dataList.map(item => {
            this.cities.push({
              value: item.id.toString(),
              label: item.dataValue
            });
          });

          if (this.formComponent !== undefined) {
            this.formComponent.form.controls['cityId'].patchValue(this.cities);
          }
        }
      },
      err => {
        this.error = true;
      });
  }

Here is the HTML code that calling above function on every dropdown option change:

<ng-container *ngSwitchCase="'dropdown'" class="col-md-12">
    <ng-select [ngClass]="'ng-select'" [options]="input.options" [formControlName]="input.key" [id]="input.key" (selected)="input.onChange($event.value)"></ng-select>
</ng-container>

input.onChange($event.value) and countryOnChange is connected at the backend.

Here is how to call countryOnChange function:

const dropdown2 = new InputDropdown({
      key: 'countryId',
      label: '',
      onChange: this.countryOnChange,
      options: this.countries,
      value: '',
      required: true,
      order: 3
    });

Error http://prntscr.com/ovjxe7

How can I solve this problem?

what means "input.onChange($event.value) and countryOnChange is connected at the backend" ? — bubbles, Aug 21 '19 at 11:11
I hope you have initialized your service in your component constructor !? — Krunal Shah, Aug 21 '19 at 11:14
You can try - (ngModelChange)="countryOnChange($event)" in your . Hope it helps. — Krunal Shah, Aug 21 '19 at 11:16
"input.onChange($event.value) and countryOnChange is connected at the backend" means **input.onChange** function is calling **countryOnChange** function. @bubbles — Mümin Celal Pinar, Aug 21 '19 at 11:16
The error should say "Cannot of undefined". In your case, likely "Cannot read property getAllByCountryId of undefined". Meaning that whatever is *before* that property is undefined thus it doesn't have the said property. In this case `this.cityService` is `undefined`. — VLAZ, Aug 21 '19 at 11:16
have you created getAllByCountryId function in your service then ? — Krunal Shah, Aug 21 '19 at 11:17
Can you check what you have in your **this** variable in **countryOnChange** method? — robert, Aug 21 '19 at 11:17
I couldn't use your suggestion @Krunal. Because `ng-select` uses `(selected)` to capture selection events and this is a dynamic form I couldn't call `countryOnChange` function directly. — Mümin Celal Pinar, Aug 21 '19 at 11:21
I am getting dropdown properties in **this** variable. @robert. How can I call service then? — Mümin Celal Pinar, Aug 21 '19 at 11:26
That means you have a wrong value in your **this** variable. Can you share how you call `countryOnChange(countryId: Guid)` method? — robert, Aug 21 '19 at 11:31
Edited my question and added how to call `countryOnChange(countryId: Guid)` method. @robert. — Mümin Celal Pinar, Aug 21 '19 at 11:37
Try changing this line: `onChange: this.countryOnChange,` to this: `onChange: this.countryOnChange.bind(this),` — robert, Aug 21 '19 at 11:38

score 0 · Answer 1 · answered Aug 21 '19 at 11:28

I think [ngModel] is needed:

  <select [ngModel]="selectedValue" (ngModelChange)="onDropdownChange($event)" 
   class="form-control">
            <option *ngFor="let category of categorylist" [ngValue]="category.id"> 
         {{category.Description}}</option>
   </select>

refer to: Angular 2 How to bind selected id in Dropdownlist with model?

score 0 · Answer 2 · answered Aug 21 '19 at 11:52

0

getAllByCountryId of undefined error means you are getting this.cityService as undefined. Check with which this context your function is binding when you are creating the InputDropDown. May be you need to define it like :-

const dropdown2 = new InputDropdown({
      key: 'countryId',
      label: '',
      onChange: this.countryOnChange.bind(this),
      options: this.countries.bind(this),
      value: '',
      required: true,
      order: 3
});

Hope this helps.

answered Aug 21 '19 at 11:52

Sanket

612
5
23

Why do you bind `options: this.countries.bind(this),` ? – robert Aug 21 '19 at 12:05
If you want to change countries then you can bind otherwise ignore binding countries. Did it worked with countryOnChange ? – Sanket Aug 21 '19 at 12:40
According to the latest comment under the question it did. – robert Aug 21 '19 at 12:43
ohh , i didn't checked the comments. Good to know i was helping correctly. – Sanket Aug 21 '19 at 13:05
There is another problem here. Yes, countryOnChange can be captured but this trigger should populate another dropdown(cities) and this dropdown is like country above too. So how to populate another dropdown after countryOnChange triggered. I tried this: `this.formComponent.form.controls['cityId'].patchValue(this.cities);` But didn't work. @robert, @Sanket – Mümin Celal Pinar Aug 22 '19 at 09:31
I solved. I used: `((this.formComponent.inputs as InputBase[]).find(i => i.key === 'cityId') as InputDropdown).options = options;` – Mümin Celal Pinar Aug 22 '19 at 10:15

How to solve "of undefined" problem of a service?

2 Answers2