Angular中的*ngFor嵌套循环。

17 浏览
0 Comments

Angular中的*ngFor嵌套循环。

这个问题在此处已有答案:

如何使用*ngFor访问对象的键和值

我有一个包含对象数组的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
admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

创建一个像这样的管道 

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

像这样调用管道 

     {{q.question}}
    
    
      
  • 
        {{key}} : {{option[key]}}  
      
    •

0
0 Comments 

questions = [{
            question: "What is your name?",
            options: [ "Abc", "Def", "Ghi", "Jkl"] 
           }, {            {
            question: "Where is your Home Town?",
            options: [ "Abc", "Def", "Ghi", "Jkl"] 
              }]
     {{q.question}}
    
    
      
  • {{option}} 
    •

你应该像上述修改你的JSON格式

0