Angular 嵌套循环的角度*Ng

我有一个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 Def Ghi Jkl

---

您应该使用如上所述的方法修改json格式

创建这样的管道

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>

像这样称呼管道

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>

---

您可能需要使用角度管道和*ngFor才能工作，类似这样的东西您只想显示数组中的第一个对象，是吗？您到底有什么问题？谁发明了这种奇怪的数据格式？@torazaburo我遇到了渲染嵌套对象的问题，这些对象有选项1，选项2，选项3，选项4检查这不应该是问题的q吗？@Aravind我想你正在尝试更改问题格式，但是如果数据来自固定的web服务，那么这将不起作用，我想只有在他具有可能起作用的灵活性的情况下才会起作用是@Rahussing数据来自webservices@Ricky您可能必须使用我建议使用管道来格式化数据。根据你的need@RahulSingh，不需要属性option1、option2等，这样我们就可以减少数据传输的大小。我得到了对象的值，但只需要值。@Ricky检查更新的答案