投射 <tr> 集合副本的 Angular2 指令答案

【问题标题】：Angular2 Directive that Projects Copies of a Collection of <tr>投射 <tr> 集合副本的 Angular2 指令
【发布时间】：2016-06-28 05:07:21
【问题描述】：

使用这些数据和 html 代码，我如何构建一个创建结果 html 的组件？ <head> 和 <tbody> 部分是投影的，我知道如何投影多个元素，但我不确定如何在正文中重复投影的 <tr>。在 angular1 中，选择性地编译元素并绑定它们是一件简单的事情。甚至手动跟踪副本也非常简单（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。

【问题讨论】：

标签： typescript angular

【解决方案1】：

你会使用 *ngFor 伪代码如下：

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

【讨论】：

该组件除了简单的行重复器之外还添加了其他特殊行为，该组件的重点是避免每次我们一张表时都必须编写*ngFor。在 Angular 1.x 中实现这一点相当容易。