* ngFor에서 HTML angular2

Question

*ngFor을 사용하여 테이블에 내 개체를 바인딩하려고합니다. 각 머리글, Grade 및 Names 아래에 배열 요소를 추가하고 싶습니다. 행에 의해 배열 요소를 추가하는 방법이 있습니까? 그래서 다음과 같이 표시됩니다

이

내 HTML이 :

<div> 
    <table> 
     <tr> 
      <td colspan="2" style = "text-align: center;"> Names</td> 
     </tr> 
     <tr> 
     <th>Grade</th> 
     <th>Names</th> 
     </tr> 
    </table> 
</div> 

Answer 1

이 데이터 구조

만들기 당신에게

<table> 
<thead> 
<tr> 
<th>Grade</th><th>Names</th> 
</tr> 
</thead> 
<tbody> 
<tr *ngFor="let data of your_data"> 
<td>{{ data.grade}}</td><td>{{data.name}}</td> 
</tr> 
</tbody> 
</table> 

Answer 2

1. 도움말의 배열을 정의 할 수 있습니다 데이터 구조
2. 을 html로 보간하고 for 루프를 만들어 배열을 반복하고 각 행을 그립니다.

에서 classmate.model.ts component.ts에서

export class ClassmateType{ 
    name: string; 
    grade: number; 
} 

(외부 부품 본체) 수입 './classmate.model.ts'에서 ClassmateType {};

(내부 부품 본체)

classmates :ClassmateType[] = [ 
    {"billy", 6}, 
]; 

component.html 에서

<div> 
    <table> 
     <tr> 
     <th>Grade</th> 
     <th>Names</th> 
     </tr> 
     <tr *ngFor="let classmate of classmates"> 
     <td>{{classmate.grade}}</td> 
     <td>{{classmate.name}}</td> 
     </tr> 
    </table> 
</div>