Сформировать таблицу с RowSpan использования Угловым 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, 
     }] 
    }] 
    } 
] 

В основном список категорий, со всеми компетенциями в рамках этой категории, и для каждого типа компетентности, записей для каждого пользователя (поэтому количество пользователей будет равным для каждой компетенции).

Теперь я хочу, чтобы создать таблицу из этого:

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