Angular *ngFor嵌套循环[重复]

Posted 2023-03-13

【中文标题】Angular *ngFor嵌套循环[重复]

【英文标题】：Angular *ngFor nested loop [duplicate]

【发布时间】：2017-09-30 20:01:13

【问题描述】：

我有一个带有这样的对象数组的 json

questions = [
        
            question: "What is your name?",
            options: [
                
                    option1 : "Abc",                    
                , 
                    option2 : "Def"
                , 
                    option3 : "Ghi"
                , 
                    option4 : "Jkl"
                
            ]
        ,
        
            question: "Where is your Home Town?",
            options: [
                
                    option1: "Abc"
                , 
                    option2: "Def"
                , 
                    option3: "Ghi"
                , 
                    option4: "Jkl" 
                
            ]
        
      ]

在我看来，我想像这样用 ngFor 渲染那个 json

你叫什么名字？

Abc 默认 吉 Jkl

【问题讨论】：

您可能必须使用角管和 *ngFor 才能使其正常工作，类似于 ***.com/questions/38060793/…

您只想显示数组中的第一个对象是吗？

您到底遇到了什么问题？谁发明了这种奇异的数据格式？

@torazaburo 我在渲染具有 option1、option2、option3、option4 的嵌套对象时遇到问题

查看***.com/questions/35534959/…

【参考方案1】：

questions = [
            question: "What is your name?",
            options: [ "Abc", "Def", "Ghi", "Jkl"] 
           ,             
            question: "Where is your Home Town?",
            options: [ "Abc", "Def", "Ghi", "Jkl"] 
              ]

<div *ngFor="let q of questions">
    <span> q.question</span>
    <ul>
      <li *ngFor="option in q.options">option </li>
   </ul>
</div>

你应该使用如上修改你的 json 格式

【讨论】：

不应该是let q of questions吗？

@Aravind 您正在尝试更改我认为的问题格式，但如果假设数据来自已修复的网络服务，那么这将不起作用，我想只有当他具有它可能工作的灵活性时

是的@RahulSingh 数据来自网络服务

@Ricky 您可能必须使用我建议的方法，使用管道来格式化数据。根据您的需要

@RahulSingh，不需要option1, option2等属性，这样我们可以减少数据传输的大小。

【参考方案2】：

创建一个这样的管道

import  PipeTransform, Pipe  from '@angular/core';

@Pipe(name: 'keys')
export class KeysPipe implements PipeTransform 
  transform(value, args:string[]) : any 
    let keys = [];
    for (let key in value) 
      keys.push(key);
    
    return keys;
  

这样调用管道

<div *ngFor="#q of questions">
    <span> q.question</span>
    <ul>
      <li *ngFor="#option of q.options  ">
        <span *ngFor="#key of option | keys ">key : option[key]  </span>
      </li>
   </ul>
</div>

【讨论】：

我得到了对象的值，但我只想要值。

@Ricky 检查更新的答案