컬렉션의 복사본을 투영하는 Angular2 지시문 <tr>

이 데이터와 html 코드를 사용하면 어떻게 결과 html을 만드는 구성 요소를 만들 수 있습니까? <head> 및 <tbody> 섹션이 투사되고 여러 요소를 투영하는 방법을 알고 있지만 투영 된 <tr>을 본문에 반복하는 방법을 모르겠습니다. angular1에서는 선택적으로 요소를 컴파일하고 바인딩하는 것이 간단합니다. 사본을 수동으로 추적하는 것조차도 매우 간단합니다 (ngRepeat의 간단한 복제본). 내가 이것을 작동 각도 1 지시문으로 만들었지 만 각도 2로 변환하는 방법을 잃어 버렸습니다. angular1에서는 테이블의 일부분을 선택적으로 컴파일하는 방법 때문에 <thead>과 자식 및 <tbody>에 지시문을 넣을 수 있습니다. <tbody>의 자식에 배치 된 모든 요소는 전달 된 배열의 각 요소에 대해 반복되고 컴파일됩니다.컬렉션의 복사본을 투영하는 Angular2 지시문 <tr>

JSON

[ 
    {name: "bob", number: "555-1234"}, 
    {name: "fred", number: "555-1235"}, 
    {name: "joe", number: "555-1236"} 
]

HTML

<table sortable="person in people"> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Number</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>{{person.name}}</td> 
     <td>{{person.number}}</td> 
    </tr> 
    </tbody> 
</table>

결과

<table sortable="person in people"> 
    <thead> 
    <tr><th>Name</th><th>Number</th></tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>bob</td> 
     <td>555-1234</td> 
    </tr> 
    <tr> 
     <td>fred</td> 
     <td>555-1235</td> 
    </tr> 
    <tr> 
     <td>joe</td> 
     <td>555-1236</td> 
    </tr> 
    </tbody> 
</table>

sortable 속성이 될 수 있습니다 [sortable] 또는 *sortable .

출처

2016-06-27 ARandomFurry

당신은 여기 * ngFor 는 의사 코드 사용한다 :

<table> 
<thead>..stuff...</thead> 
<tbody> 
<tr *ngFor="#dataItem in sourceDataList". 
<td> ${dataItem.name} </td> 
<td> ${dataItem.number} </td> 
</tr> 
</tbody> 
</table>

출처

2016-06-27 21:07:21 Deepak

구성 요소는 간단한 행 중계기 외에 다른 특별한 행동을 추가하고,이 구성 요소의 포인트는 작성하지 않도록하는 것입니다 * ngFor 각 우리가 테이블에 앉을 때. 이것은 Angular 1.x에서 이것을 쉽게 수행 할 수있었습니다. – ARandomFurry

컬렉션의 복사본을 투영하는 Angular2 지시문 <tr>

답변

관련 문제