Generate tavolo con rowspan utilizzando angolare 2

Question

ho uno struttura di dati come questo:

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

Fondamentalmente un elenco di categorie, con tutte le competenze all'interno di tale categoria, e per ogni tipo di competenza, un record per ogni utente (quindi il numero di utenti sarà uguale per ogni competenza).

Ora voglio generare una tabella da questo:

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

Il che significa che saranno coinvolti rowspan. Tuttavia, non riesco a capire come iniziare.

Se scrivo

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

ottengo

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

Quindi la mia domanda è: come associare un valore alla proprietà modello rowspan?

Answer 1

Lo stesso Rowspan non è una proprietà nativa, è un attributo. Allora, cosa che devi fare è quello di accedere attributo rowspan dell'elemento come segue:

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

Questo dovrebbe fare il trucco e si sta ora impostando il valore per rowspan. È obbligatorio utilizzare l'attributo vincolante quando non esiste alcuna proprietà di elemento a cui associare. Se vuoi saperne di più, guarda lo official documentation.