生成 table 和 rowspan 使用 Angular 2

Question

我有这样的数据结构：

    [
  "category1": {
    "name": "Cat 1",
    "competences": [{
      "name": "Comp 1",
      "users": [{
        "name": "user1",
        "level": 99,
      }, {
        "name": "user2",
        "level": 99,
      },… {
        "name": "userN",
        "level": 9001,
      }]
    }, {
      "name": "Comp 2",
      "users": [{
        "name": "user1",
        "level": 99,
      }, {
        "name": "user2",
        "level": 99,
      },… {
        "name": "userN",
        "level": 9001,
      }]
    }]
  },
  "category2": {
    "name": "Cat 2",
    "competences": [{
      "name": "Comp 3",
      "users": [{
        "name": "user1",
        "level": 99,
      }, {
        "name": "user2",
        "level": 99,
      },… {
        "name": "userN",
        "level": 9001,
      }]
    }, {
      "name": "Comp 4",
      "users": [{
        "name": "user1",
        "level": 99,
      }, {
        "name": "user2",
        "level": 99,
      },… {
        "name": "userN",
        "level": 9001,
      }]
    },… {
      "name": "Comp N",
      "users": [{
        "name": "user1",
        "level": 99,
      }, {
        "name": "user2",
        "level": 99,
      },… {
        "name": "userN",
        "level": 9001,
      }]
    }]
  },
  "categoryN": {
    "name": "Cat N",
    "competences": [{
      "name": "Comp 5",
      "users": [{
        "name": "user1",
        "level": 99,
      }, {
        "name": "user2",
        "level": 99,
      },… {
        "name": "userN",
        "level": 9001,
      }]
    }]
  }
]

基本上是一个类别列表，包含该类别中的所有能力，对于每种能力类型，每个用户都有一条记录（因此每个能力的用户数量相等）。

现在我想从中生成一个 table:

+----------------+--------+--------+---+--------+
|                | user 1 | user 2 | … | user N |
+-------+--------+--------+--------+---+--------+
| Cat 1 | Comp 1 | 99     | 99     | … | 9001   |
|       +--------+--------+--------+---+--------+
|       | Comp 2 | 99     | 99     | … | 9001   |
+-------+--------+--------+--------+---+--------+
| Cat 2 | Comp 3 | 99     | 99     | … | 9001   |
|       +--------+--------+--------+---+--------+
|       | Comp 4 | 99     | 99     | … | 9001   |
|       +--------+--------+--------+---+--------+
|       | …      | …      | …      | … | …      |
+       +--------+--------+--------+---+--------+
|       | Comp N | 99     | 99     | … | 9001   |
+-------+--------+--------+--------+---+--------+
| Cat 3 | Comp 5 | 99     | 99     | … | 9001   |
|       +--------+--------+--------+---+--------+
|       | Comp 6 | 99     | 99     | … | 9001   |
+-------+--------+--------+--------+---+--------+

即涉及rowspan。但是，我不知道如何开始。

如果我写

<tr *ngFor="let category for categories">
    <td [rowspan]="category.components.length">

我明白了

Can't bind to 'rowspan' since it isn't a known native property

所以我的问题是：如何将模板值绑定到 rowspan 属性?

Answer 1

Rowspan 本身不是原生的属性，它是一个属性。所以你要做的就是访问元素的 rowspan 属性，如下所示：

<td [attr.rowspan]="category.components.length"></td>

这应该可以解决问题，您现在正在设置 rowspan 的值。当没有要绑定的元素属性时，您必须使用属性绑定。如果您想阅读更多相关内容，请查看 official documentation。

生成 table 和 rowspan 使用 Angular 2

Generate table with rowspan using Angular 2

grid-layout

angular