コレクションのコピーを投影する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>

答えて

関連する問題