Question

我有一个像这样的对象数组的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

默认值

GHI

JKL

Answer 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格式

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

Angular * ngFor嵌套循环

2 个答案: