Question

使用这些数据和HTML代码，我如何构建一个创建结果html的组件？预测了<head>和<tbody>部分，我知道如何投影多个元素，但我不确定如何重复体内的预计<tr>。在角度1中，选择性地编译元素并绑定它们是一件简单的事情。即使手动跟踪副本也非常简单（ngRepeat的简化克隆）。我把它作为一个工作的angular1指令创建，但是我失去了将它转换为angular2的方法。在angular1中，由于我选择性地编译表的某些部分，您可以将指令放在<thead>和子项以及<tbody>上。放置在任何<tbody>子节点上的任何内容都将重复并为传入的数组中的每个元素进行编译。

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。

Answer 1

你会使用* ngFor 这是伪代码：

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

Angular2指令，项目复制

1 个答案: