角2:通过遍历对象动态创建Div

Question

我想通过对JSON变量中的对象进行迭代来动态创建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]);  
                }  
            });  
    }
}

如何创建3div-物理，化学和数学根据这个JSON在飞行.

我得到的是对象的所有属性，而不是对象本身。输出如下

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

而不是物理，化学，数学

类型记录提供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...
}