populate an ion-list with names based on value in ion-select

Question

I am trying to fill a list with names which depend on a selection made from a combo box (ion-select/ion-option). each time an option is selected the list needs to be emptied and filled with the new list.

When the view loads, it is loaded from a side menu option, ion-select is populated with items from an array that is filled from a web service; this works perfectly as intended.

When the user selects one of the options an ion-list needs to be populated from a separate web service; this is where my problem lies.

Once the option is selected it calls a function, inside the function console.log(); prints the array correctly, but, the list is not populated with items in the array.

Since everything besides the list work correctly and NO ERRORS are spat out, i will only give code snips from the view and controller.

HTML

<ion-content padding>
<ion-item>
  <ion-label>view names</ion-label>
  <ion-checkbox color="danger" checked="false"></ion-checkbox>
</ion-item>
<ion-list>
  <ion-item>
    <ion-label>SELECT A DEPT</ion-label>
    <ion-select>
      <ion-option *ngFor="let dept of myDept" (ionSelect)="getEmpNames('20180101', '46')">{{dept.deptName}}</ion-option>
    </ion-select>
  </ion-item>
</ion-list>
<button ion-button>confirm</button> //currently unused
<ion-list>
  <ion-item *ngFor="let name of nameList">
    <p>{{name.empName}} {{name.empSurname}}</p>
    <ion-toggle enabled checked="false"></ion-toggle> //currently unused
  </ion-item>
</ion-list>
</ion-content>

.TS

getEmpNames(DATE:string, dID: string) {
    this.capTeams.getConfirmedPlayerList(DATE, TID, GID).subscribe(
      data => {
        this.nameList = data.employees;
        console.log('list of employee names');
        console.log(this.nameList);
      }
    )
  }

console.log(this.nameList); displays the array in the console window but the ion-list does not print the names.

please note: since i am developing each page on its own, i force dummy data into functions because i know what to expect, each function prints the entire api on which i can click on and verify anything.

extract from package.json

"dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  }

I do hope this is enough information, if not, please ask for anything specific. any assistance/solutions will be much appreciated. Thanks in advance.

Answer 1

The problem is that if you want to use ion-toggle in a list, you must wrap your values in ion-label or they simply won't display.

Either delete the <ion-toggle> or change your <p> tag to <ion-label> and your values will display.

Stackblitz Demo