Angular ngFor 并将 table 划分为标题部分

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
         }
      ]
   }
]

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

这正是我们有 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 标签。以这种方式创建的每个 table 都会有不同的列宽，结果看起来很糟糕。

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

Answer 1

看看这个Codepen

只需将 table 中继器向下移动到 tbody 它不会创建新的 table

<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 2

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

You can specify only one caption per table.

这是我修改的代码

 <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>

希望对您有所帮助。

Answer 3

我会将 ngFor 从 table 水平移动到 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

Angular ngFor 并将 table 划分为标题部分

Angular ngFor and dividing table to titled sections

ngfor

angular