2016-05-25 20 views
6

を使用してROWSPANを持つテーブルを生成します。そのカテゴリ内のすべての力量と、それぞれの能力の種類のカテゴリの私はこのようなデータ構造を持つ角度2

[ 
    "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プロパティにテンプレートの値をバインドする方法?

答えて

19

行自身はネイティブプロパティではなく、属性です。だから、あなたは何をすべきか、次のように要素のROWSPAN属性にアクセスすることです:トリックを行う必要がありますし、あなたが今rowspanに値を設定している

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

は、バインドする要素プロパティがない場合は、属性バインディングを使用する必要があります。詳細については、official documentationをご覧ください。

+1

遅れて申し訳ありませんが、実際には助かりました(それ以来、プロジェクトが予期せぬ変化を遂げたにもかかわらず、このアプローチはまったく使用しません)。 – GergelyPolonkai

+0

更新されたドキュメントhttps://angular.io/guide/template -syntax#attribute-binding –

関連する問題