如何从嵌套 ngFor 循环中的离子选择中获取价值？答案

【问题标题】：How to get value out of a ion-select in a nested ngFor loop?如何从嵌套 ngFor 循环中的离子选择中获取价值？
【发布时间】：2018-04-16 18:42:06
【问题描述】：

如标题所述。我的 html 中有一个嵌套的 ngFor 循环。我在ion-select 语句中使用这些ngFor 循环之一。这是我的代码：

<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>

我正在尝试弄清楚如何使用[(ngModel)] 从*ngFor="let item of item.options" 中获取价值。

谁能帮我解决这个难题？我被要求提供我的数据。我有一个将这个对象推入的数组：let item = { attender: member, options: [{}] }; 选项部分将一个 JSON 对象推入其中。这甚至可能是不可能的。

这是数据的总构建：

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);
      }

【问题讨论】：

您想从 *ngFor="let item of item.options" 中获取值并将其分配给哪个变量？
如果您发布了您的数据的样子，将会有所帮助。它可以通过提供的答案中的单独变量轻松实现，但如果您正在寻找“其他东西”，请澄清并向我们展示数据的构建:)
我已经编辑过了。看看原帖吧！
哇，代码太多了，我要找的是你的数据的控制台日志，即pageOptions：P

标签： angular ionic-framework ionic3 ngfor ngmodel

【解决方案1】：

我认为这应该可行

 <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>

【讨论】：

感谢您的回复。我的问题是，当我在其中一位与会者上选择一个选项时，它会填充每个人。如果我想为一个人选择一个选项，然后为另一个人选择不同的选项怎么办？这是我的数据：let item = { attender: member, options: [{}] };