使用Angular 2生成带有rowspan的表

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

基本上是一个类别列表,具有该类别内的所有能力,并且对于每种能力类型,每个用户的记录(因此每个能力的用户数量相等).

现在我想从这里生成一个表:

+----------------+--------+--------+---+--------+
|                | 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.您必须使用时,有没有绑定到元素属性属性绑定.如果您想了解更多信息,请查看官方文档.