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

Answer 2

看看这个Codepen

只需将表中继器移动到水平，它不会创建新表

<div ng-app="angularTypeahead">
    <div class="container-fluid" ng-controller="TypeaheadCtrl">
<table class="table table-striped" >
<tbody ng-repeat="data in stuff">
  <tr>
    <td colspan="5"> 
  <div class="caption">{{ data.name }}</div>
    </td>
  </tr>
        <tr>
            <th>Token</th>
            <th>Value</th>
            <th class="tablecol-700">Explanation</th>
            <th colspan="2"></th>
        </tr>
        <tr ng-repeat="setting in 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>

</table>

    </div>
</div>

Answer 3

您可以在您的tbody 中插入您的*ngFor，因为您可以拥有多个tbody。 但是你只能有 1 个标题。看看here

您只能为每个表格指定一个标题。

这是我修改的代码

 <table class="table table-striped">
    <thead>
        <tr>
            <th>Token</th>
            <th>Value</th>
            <th>Explanation</th>
            <th colspan="2"></th>
        </tr>
    </thead>
    <tbody  *ngFor="let data of stuff">
        <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>

希望这会有所帮助。