[Ionic 4] Dynamically populate ion-select options from loaded array using ngFor

@sanesma93 wrote:

Hey there everyone.
I am working on an app where you can create transactions and save/load the information of the transactions as templates for future use.

unknown.png619x522 11.7 KB

I can save the form information as a template without problem yet the issues appear when trying to load previously saved templates. What I am trying to do is that once the user clicks on the ion-select, the pop-up opens and is populated with all the saved templates as options though I don’t know how to do this dynamically.
Here’s some relevant template code

export class TemplateService {
  public templates: Template[] = [];
  public loaded: boolean = false;

  constructor(private storage: Storage) {

  }

  load(): Promise<boolean> {

    //return promise so we know when operation is completed
    return new Promise((resolve) => {

      //Get notes saved in storage
      this.storage.get('templates').then((templates) => {

        //set only this.notes to returned val if values stored
        if(templates != null) {
          this.templates = templates;
        }

        //check if data loaded or not
        this.loaded = true;
        resolve(true);
      });

    });

  }
...

The idea was to use ngFor to iterate through the array and add each existing template as an option in the ion-select, however I keep getting problems with it
This is the HTML snippet

  </ion-item>
             <ion-item>
               <ion-label>Load template</ion-label>
               <ion-select> 
                 <ion-option *ngfor = "let item of templates;">
                   {{templates}}
                  </ion-option>  
               </ion-select>
             </ion-item>

And this is the code in the JS file

export class NewTransactionPage {
 ...
  templates: Template[];
...
 constructor( public formBuilder: FormBuilder,   public toastCtrl: ToastController, public navCtrl: NavController, public navParams: NavParams, public userService: User, public transferServicerino: TransferService, public templateServicerino: TemplateService) {
 ...
    this.templates = templateServicerino.getAllTemplates();
...

Thank you in advance for your help

Posts: 1

Participants: 1

Read full topic