How to get value out of a ion-select in a nested ngFor loop?

Issue

As the title states. I have a nested ngFor loop in my html. I am using one of these ngFor loops in a ion-select statement. Here is my code:

<ion-item *ngFor"let item of pageOptions" >
      <ion-label>{{item.attender.FIRST_NAME}} {{item.attender.LAST_NAME}}</ion-label>
      <ion-select multiple"true">
        <ion-option value"item" *ngFor"let item of item.options">{{item.ATTENDER_NAME}} ${{item.PARTICIPANT_PRICE}}</ion-option>
      </ion-select>
</ion-item>

I am trying to figure out how to get the value out of *ngFor"let item of item.options" using [(ngModel)].

Can anyone help me figure out this conundrum? I got asked for my data. I have an array that I am pushing this object into: let item { attender: member, options: [{}] }; The options portion gets a JSON object pushed into it. This might not even be possible.

Here is the total build of the data:

this.attenders  this.clickedItem.attenders;
      this.attenderOptions  this.clickedItem.activityDefinition.ATTENDERS; //this might not be ATTENDERS
      this.positionOptions  this.clickedItem.activityDefinition.POSITIONS;
      this.guests  this.clickedItem.guests;
      for (var i  0; i < this.attenders.length; i++) {
        let item  {
          attender: this.attenders[i],
          options: []
        };
        for (var j  0; j < this.attenderOptions.length; j++) {
          let minAge  this.attenderOptions[j].MIN_PARTICIPANT_AGE;
          let maxAge  this.attenderOptions[j].MAX_PARTICIPANT_AGE;
          let minGrade  this.attenderOptions[j].MIN_PARTICIPANT_GRADE;
          let maxGrade  this.attenderOptions[j].MAX_PARTICIPANT_GRADE;
          let availablePositions  this.attenderOptions[j].AVAILABLE_POSITIONS;
          var birthdate  this.convertBirth(this.attenders[i].BIRTH_DAY, this.attenders[i].BIRTH_MONTH, this.attenders[i].BIRTH_YEAR)
          var gradeString  this.attenders[i].GRADE;
          var grade  this.convertGrade(gradeString);
          if (availablePositions > 0) {
            if ((this.compareMinDates(birthdate, minAge) && this.compareMaxDates(birthdate, maxAge)) || (this.compareMinGrades(grade, minGrade) && this.compareMaxGrades(grade, maxGrade))) {
              //within age constraints
              item.options.push(this.attenderOptions[j]);
            } else if (minAge  "" && maxAge  "" && minGrade  "" && maxGrade  "") {
              item.options.push(this.attenderOptions[j]);
            }
          }
        }
        for (var j  0; j < this.positionOptions.length; j++) {
          if (this.positionOptions[i] ! undefined) {
            let minAge  this.positionOptions[j].MIN_PARTICIPANT_AGE;
            let maxAge  this.positionOptions[j].MAX_PARTICIPANT_AGE;
            let minGrade  this.positionOptions[j].MIN_PARTICIPANT_GRADE;
            let maxGrade  this.positionOptions[j].MAX_PARTICIPANT_GRADE;
            let availablePositions  this.positionOptions[j].POSITIONS_REMAINING;
            var birthdate  this.convertBirth(this.attenders[i].BIRTH_DAY, this.attenders[i].BIRTH_MONTH, this.attenders[i].BIRTH_YEAR)
            var gradeString  this.attenders[i].GRADE;
            var grade  this.convertGrade(gradeString);
            if (availablePositions > 0) {
              if ((this.compareMinDates(birthdate, minAge) && this.compareMaxDates(birthdate, maxAge)) || (this.compareMinGrades(grade, minGrade) && this.compareMaxGrades(grade, maxGrade))) {
                //within age constraints
                this.positionOptions[i].ATTENDER_NAME  this.positionOptions[i].POSITION_NAME;
                this.positionOptions[i].PARTICIPANT_PRICE  0;
                item.options.push(this.positionOptions[j]);
              } else if (minAge  "" && maxAge  "" && minGrade  "" && maxGrade  "") {
                this.positionOptions[i].ATTENDER_NAME  this.positionOptions[i].POSITION_NAME;
                this.positionOptions[i].PARTICIPANT_PRICE  0;
                item.options.push(this.positionOptions[j]);
              }
            }
          }
        }
        this.pageOptions.push(item);
      }

Solution

I think this should work

 <ion-item *ngFor"let item of pageOptions" >
  <ion-label>{{item.attender.FIRST_NAME}} {{item.attender.LAST_NAME}}</ion-label>
  <ion-select [(ngModel)]"select"  multiple"true">
    <ion-option value"item" *ngFor"let item of item.options">{{item.ATTENDER_NAME}} ${{item.PARTICIPANT_PRICE}}</ion-option>
  </ion-select>

Answered By – Daniel Bezerra De Menezes

Leave a Comment