如何循环以获取角度 5 中的不同数组？答案

【问题标题】：How to loop over to get different array in angular 5?如何循环以获取角度 5 中的不同数组？
【发布时间】：2018-07-20 11:23:04
【问题描述】：

{  
   "status":"true",
   "select":[  
      {  
         "view_":"select",
         "Type":"MARKET_WORKING",
         "Question":"WHICH BRAND COUNTER IS IT?",
         "options":[  
            {  
               "option":"USPA"
            },
            {  
               "option":"HANES"
            },
            {  
               "option":"USPA & HANES "
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            }
         ]
      }
   ],
   "text":[  
      {  
         "view_":"select",
         "Type":"MARKET_WORKING",
         "Question":"WHAT IS THE OPENING STOCK OF INNERWEARS TOP?",
         "options":[  
            {  
               "option":"VEST"
            },
            {  
               "option":"BRA_PADDED"
            },
            {  
               "option":"BRA_NON PADDED"
            },
            {  
               "option":"CAMISOLE"
            },
            {  
               "option":"THERMAL"
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            }
         ]
      },
      {  
         "view_":"select",
         "Type":"MARKET_WORKING",
         "Question":"WHAT IS THE OPENING STOCK OF INNERWEARS BOTTOM?",
         "options":[  
            {  
               "option":"BRIEF"
            },
            {  
               "option":"TRUNKS"
            },
            {  
               "option":"PANTIES"
            },
            {  
               "option":"THERMAL LEGGINGS"
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            }
         ]
      },
      {  
         "view_":"select",
         "Type":"MARKET_WORKING",
         "Question":"WHAT IS THE OPENING STOCK OF COMFORTWEARS TOP?",
         "options":[  
            {  
               "option":"MEN'S T SHIRT"
            },
            {  
               "option":"MEN'S TANKS"
            },
            {  
               "option":"WOMEN'S T SHIRT"
            },
            {  
               "option":"WALL FIXTURE"
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            }
         ]
      },
      {  
         "view_":"select",
         "Type":"MARKET_WORKING",
         "Question":"WHAT IS THE OPENING STOCK OF COMFORTWEARS BOTTOM?",
         "options":[  
            {  
               "option":"BOXER SHORTS"
            },
            {  
               "option":"MEN'S SHORTS"
            },
            {  
               "option":"MEN'S PANTS"
            },
            {  
               "option":"MEN'S SOCKS"
            },
            {  
               "option":"WOMEN'S SHORTS"
            },
            {  
               "option":"WOMEN'S PANTS"
            },
            {  
               "option":"WOMEN'S CAPRI"
            },
            {  
               "option":"WOMEN'S SOCKS"
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            },
            {  
               "option":""
            }
         ]
      }
   ]
}

这是来自api的JSON

我想把所有的问题和选项分别放在循环中。为此我写了下面的代码

  if(this.user_type == 1){

        this.mwork = this.navParams.get('mwork');
        this.selectq = this.mwork.select;
        this.selecto = this.selectq[0].options;
        //this.selecto = this.selectq.options;
        this.textq = this.mwork.text;
        this.texto = this.textq[0].options;

        console.log(this.selecto);
    }

下面是html

div class="field-group" *ngFor="let mworkq of selectq">
        <div class="label-cust">{{mworkq.Question}}</div>
        <div class="field-cust">
          <select [(ngModel)]="selectedOption">
            <option value=''>Select</option>
            <option  *ngFor="let mworkq of selecto" value="{{mworkq.option}}">{{mworkq.option}}</option>

           <!--  <option value="{{mworkq.option4}}">{{mworkq.option4}}</option> -->

          </select>
        </div>
      </div>
      <div class="field-group" *ngFor="let mworkq of textq">
        <div class="label-cust">
              {{mworkq.Question}}
              <ion-input *ngFor="let mworkq of texto" class="{{mworkq.option}}" type="text" placeholder="{{mworkq.option}}" ></ion-input>

        </div>

但是由于[0]，现在发生的事情只有第一个选项值出现在所有问题中。那么我怎样才能使它动态地显示与那里的问题相关的选项。请帮忙。谢谢。

对于 Florin，我使用下面的 html 来生成循环

  <div class="field-group" *ngFor="let mworkq of textq">
        <div class="label-cust">
              {{mworkq.Question}}
              <ion-input *ngFor="let mworkq of texto" class="{{mworkq.option}}" type="text" placeholder="{{mworkq.option[i]}}" ></ion-input>

        </div>
       </div>

从此ts

 for (const selectItem1 of this.mwork.text){ 
             this.textq = selectItem1.Question;       
               for (const selectItem2 of this.mwork.text){
                      this.texto = selectItem2.options;      
                    }     
        }

【问题讨论】：

可以使用for (cont keys of Object.keys(this.mwork.select)进行迭代。
你能解释一下怎么做吗？因为我是后端功能的新手
Object.keys(instanceObject) 将返回每个对象属性，因此您可以遍历并访问您的 selectq，然后您可以执行相同的操作 for (const textKeys of Object.keys(this.mwork.text) 访问您所有的 textq
我用于 Object.keys 我在控制台中得到了 0
我正在写一个答案，我没有看到你的选择和文本是一个项目的数组^^

标签： javascript angular ionic3 angular5

【解决方案1】：

可能我弄错了。但是你为什么不使用

*ngFor="let option of options; index as i"

之后

values[i]

注意：index as i 语法需要 Angular 5+

【讨论】：

@SagarKodte 你没有像他建议的那样使用索引。
值在哪里使用[i]

【解决方案2】：

您的 json 对象具有三个属性，status、select 和 text。

看起来是这样的：

{
 status: "",
 select: [{
   view_:"",
   Type:"",
   Question:"",
   options:[{}]
 }],
 text: [{
   {
   view_:"",
   Type:"",
   Question:"",
   options:[{}]
 }
 }]
}

我想把所有问题和选项都放在循环中分别。

你可以试试这个。请注意，您的结构对我来说看起来很奇怪......嵌套循环只是突出显示了这里的不良结构。

this.mwork = this.navParams.get('mwork');

for (const selectItem of this.mwork.select){
  console.log(selectItem.Question);
  for (const option of selectItem.options){
    console.log(option.option);
  }
}

编辑：

根据您的问题编辑，您正在使用 *ngFor 指令，因此您需要将数据存储在迭代器中。示例：

const mworkDatas = [];
for (const selectItem1 of this.mwork.text) {
  const question = selectItem1.Question;
  let answerOptions = [];
  for (const selectItem2 of this.mwork.text) {
   answerOptions  = selectItem2.options; 
  }
  mworkDatas.push({
    question,
    answerOptions
  });
}

然后在你的模板中：

*ngFor="let mworkData of mworkDatas"
然后您可以使用：
mworkData.question 和 mworkData.answerOptions

【讨论】：

获取未定义的选项
我写错了，你可以重试。但是，如果可以的话，请考虑考虑您的结构。
是的，我试过了..仍然给出了那个错误。但是问题来了
for (const selectItem1 of this.mwork.text){ this.textq = selectItem1.Question; for (const selectItem2 of this.mwork.text){ this.texto = selectItem2.options;我编辑了你的代码，我在控制台中得到了 q 和 answer。但是当我在 html 中使用它时，数据没有出现
@SagarKodte 你能编辑你的问题并告诉我如何“你在 hml 中使用它”吗？

【解决方案3】：

我刚刚将 html 代码更改为下面，它可以工作。我在ts 文件中选择了api。它给了我不确定的。我刚刚从来自 api 的ts 文件中获取了collection of first loop。然后 for second loop is I used value of first loop for collection of second loop 然后在其后添加 .options for 选项循环

<div class="field-group"  *ngFor="let mworkq of selectq">
        <div class="label-cust">{{mworkq.Question}}</div>
        <div class="field-cust">
          <select [(ngModel)]="selectedOption">
            <option value=''>Select</option>
            <option [hidden]="mworkq.option == null || mworkq.option.length == 0" *ngFor="let mworkq of mworkq.options" value="{{mworkq.option}}">{{mworkq.option}}</option>

           <!--  <option value="{{mworkq.option4}}">{{mworkq.option4}}</option> -->

          </select>
        </div>
      </div>
      <div class="field-group" *ngFor="let mworkq of textq">
        <div class="label-cust">
              {{mworkq.Question}}
              <ion-input [hidden]="mworkq.option == null || mworkq.option.length == 0"  *ngFor="let mworkq of mworkq.options" class="{{mworkq.option}}" type="number" placeholder="{{mworkq.option}}" ></ion-input>

        </div>
      </div>

【讨论】：

【解决方案4】：

选中此项，它将在 selecto 数组中存储所有选项，而与问题无关。

   if(this.user_type == 1){

        this.mwork = this.navParams.get('mwork');
        this.selectq = this.mwork.select;

        for(i in this.selectq)
        { 
          for(k in this.selectq[i].options)
             this.selecto.push(this.selectq[i].options[k]);
        }

        this.textq = this.mwork.text;
        this.texto = this.textq[0].options;

        console.log(this.selecto);
    }

【讨论】：

代码有什么问题，请告诉我。为什么它被否决了？
我相信 Sagar 要求的结构是按问题对答案进行分组。 “但是现在发生的事情只有第一个选项值出现在所有问题中，因为 [0]。所以我怎样才能让它动态地显示与那里的问题相关的选项。请帮助。谢谢。”该代码可能有效，不幸的是它没有回答他的问题。我也否决了这个问题，如果它让你感觉更好：P 我不完全确定对数据结构和基本循环的误解/如何使用 Angular 来显示它们属于 StackOverflow。 等待模组来评论：D
@SeanAirey，我写的代码使它变得动态，不是吗？ this.selectq = this.mwork.select; for(i in this.selectq) { for(k in this.selectq[i].options) this.selecto.push(this.selectq[i].options[k]); }
标记为 mod 注意删除我的 -1 因为你必须编辑答案.....在这里，在循环之前和循环之后添加一些空格，我也许可以删除它在模组看到我的旗帜之前:)
@SeanAirey，已添加空间