Question

我想通过迭代JSON变量中的Objects来动态创建div。 我知道如果我必须迭代阵列数组而不是迭代对象

，如何创建它

我的JSON正在关注

{  
    "physics" : {  
        "subjectCode": 101,  
        "subjectName": "Physics",  
        "sectionA": 200,  
        "sectionB": 500,  
        "sectionC": 158,  
    },  
    "chemistry" : {  
        "subjectCode": 102,  
        "subjectName": "Chemistry",  
        "sectionA": 200,  
        "sectionB": 500,  
        "sectionC": 158,  
    },  
    "maths" : {  
        "subjectCode": 102,  
        "subjectName": "Maths",
        "sectionA": 200,  
        "sectionB": 500,  
        "sectionC": 158  
    }
}

在我的组件中，我将数据存储在数据变量

中

export class AboutComponent implements OnInit {  
    data: object;  
    public dataArray: any;  
    constructor(private _data: Data) { }  
    ngOnInit() {  
        this._data.getData()  
            .subscribe(data => {  
                console.log(data);  
                for (let key in data) {  
                    console.log(data[key]);  
                    this.dataArray = [];  
                    this.dataArray.push(data[key]);  
                }  
            });  
    }
}

如何根据这个JSON动态创建3个div - 物理，化学和数学。
我得到了对象的所有属性，但没有得到对象本身。输出就像这样

{  
"subjectCode": 102,  
"subjectName": "Maths",  
"sectionA": 200,  
"sectionB": 500,  
"sectionC": 158  
}

而不是物理，化学，数学

Typescript提供 for..of语句 https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html

我知道有些人可能会将其标记为副本 Angular 2: create divs dynamically

但请帮助我。我是新手，浪费了很多时间。

无法通过简单的解释找到任何答案。

先谢谢。

Answer 1

所以你会做这样的事情：

@Component({
  template: `
    <div *ngFor="let item of dataArray">{{ item.subjectName }}</div>
  `
})
export class AboutComponent implements OnInit {
  // your class implementation...
}

Angular 2：通过迭代对象来创建Div

1 个答案: