Angular ngFor 和分表到标题部分

Question

我有来自服务器的以下 JSON 响应:

stuff = [
   {
      "_id":"59080892c88561d46736a18d",
      "name":"Miscellaneous settings",
      "priority":45,
      "settings":[
         {
            "_id":"590819cc30ae0618902c0a91",
            "token":"Setting 1",
            "value":8096,
            "description":"This is a setting.",
         }
      ]
   },
   {
      "_id":"5908087bc88561d46736a18b",
      "name":"System settings",
      "priority":30,
      "settings":[
         {
            "_id":"590816e697307f345c235360",
            "token":"Another setting",
            "value":65535,
            "description":"This is a test value for whatever reason",
            "level":5
         },
         {
            "_id":"5908175856e60a345475ae21",
            "token":"Third setting",
            "value":32767,
            "description":"This is because why not",
            "level":4
         },
         {
            "_id":"590817b7a2f9262c748542d4",
            "token":"Setting again",
            "value":16535,
            "description":"This is another setting again",
            "level":5
         }
      ]
   }
]

如您所见，这些是排列成设置组的简单设置。我必须将它们显示为表格，分成几组。

这正是我们拥有 ngFor 的原因，但似乎有问题。我可以这样做:

<table class="table table-striped" *ngFor="let data of stuff">

    <caption>{{ data.name }}</caption>
    <thead>
        <tr>
            <th>Token</th>
            <th>Value</th>
            <th>Explanation</th>
            <th colspan="2"></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let setting of data.settings">
            <td>{{ setting.token }}</td>
            <td>{{ setting.value }}</td>
            <td>{{ setting.description }}</td>
            <td><i class="fa fa-edit"></i></td>
            <td><i class="fa fa-remove"></i></td>
        </tr>
    </tbody>

</table>

它确实有效:它在 <caption> 中显示设置组名称标签，并在 table 中列出各个组中的设置每一个之后。

问题是它创建了一个新的 table对于每个设置组，因为 ngFor只能添加到table标签。以这种方式创建的每个表格都会有不同的列宽，结果看起来很糟糕。

我怎样才能制作ngFor在 table 内工作, 不重复 table ，但只有它的内容？它需要一些 HTML 标记来封装内容，但我不能使用任何不是表格元素的东西。而且我不想使用 colgroup和内联样式强制列为固定宽度，因为那样会搞砸责任。

Answer 1

我会将 ngFor 从表级别移动到 ngTemplate。之后用另一个“colspanned”td 模拟标题。您可能需要对其进行一些样式设置以匹配真实的字幕样式:

  <table class="table table-striped">
    <ng-template ngFor let-data [ngForOf]="stuff">
      <thead>
        <tr>
          <th colspan="5" class="caption">{{ data.name }}</th>
        </tr>
        <tr>
          <th>Token</th>
          <th>Value</th>
          <th class="tablecol-700">Explanation</th>
          <th colspan="2"></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let setting of data.settings">
          <td>{{ setting.token }}</td>
          <td>{{ setting.value }}</td>
          <td>{{ setting.description }}</td>
          <td class="tablecol-700">
            <i class="fa fa-edit"></i>
          </td>
          <td>
            <i class="fa fa-remove"></i>
          </td>
        </tr>
      </tbody>
    </ng-template>
  </table>

演示: http://plnkr.co/edit/ZzcmCE9AwBoWnloKXr9u?p=preview