web-dev-qa-db-fra.com

Générer un tableau avec rowpan en utilisant Angular 2

J'ai une structure de données comme celle-ci:

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

Fondamentalement, une liste de catégories, avec toutes les compétences dans cette catégorie, et pour chaque type de compétence, un enregistrement pour chaque utilisateur (donc le nombre d'utilisateurs sera égal pour chaque compétence).

Maintenant, je veux générer une table à partir de ceci:

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

Ce qui signifie que rowspan sera impliqué. Cependant, je ne peux pas comprendre comment commencer.

Si j'écris

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

Je reçois

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

Ma question est donc: comment lier une valeur de modèle à la propriété rowpan?

angulargrid-layout
11
GergelyPolonkai

Rowspan lui-même n'est pas une propriété native, c'est un attribut. Donc, ce que vous avez à faire est d'accéder à l'attribut rowpan de l'élément comme suit:

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

Cela devrait faire l'affaire et vous définissez maintenant la valeur de rowspan. Vous devez utiliser la liaison d'attribut lorsqu'il n'y a pas de propriété d'élément à laquelle se lier. Si vous souhaitez en savoir plus à ce sujet, consultez la documentation officielle .

40
LordTribual