角2データのリストを同じに表示する​​</td>

Question

私はAngular2を初めて使用しています。

list<user>の形式でデータを取得しています。各ユーザーには役割のリストがあります。私は上記のタイプの形式のデータを解析しています

export class User { 
    id: string; 
    firstName: string; 
    middleName: string; 
    lastName: string; 
    email: string; 
    roles: Role[]; 
} 

：だからtypescriptですで、私は、このユーザー・タイプを作成しました。 'users'はそのコンポーネントの配列users: Array<User>;です。ここで

<td>admin</td> 
<td>customer</td> 
<td>writer</td> 

は、私がしようとしているコードです：

私は、

を<td>admin, customer, writer</td>のようにカンマ区切りの値にRole[]を一覧表示したいが、私が代わりに取得していますがあるデータを表示する

<tr *ngFor="let user of users"> 
        <td>{{user.id}}</td> 
        <td>{{user.firstName +' '+ user.middleName+' '+user.lastName}}</td> 
        <td>{{user.email}}</td> 
        <td *ngFor="let role of Role">{{role.name}}</td> 
        <td><button type="button" class="btn btn-primary " (click)="roleOnClick(user)"></button></td> 
       </tr> 

どうすれば<td> admin, customer, writer</td>のようにすることができますか？上記の行

Answer 1

<td *ngFor="let role of roles">{{role.name}}</td> 

はあなたが見ている行動を取得している理由ですRole配列の各要素に対して<td>タグを繰り返すように述べています。

あなただけの役割のカンマ区切りのリストを取得したい場合は、あなただけの例のために、役割アレイ上に簡単な関数呼び出しを使用することもできます。

<td> {{ roles.join(', ') }} </td> 

joinは、標準のJavaScriptの関数であります配列の要素を簡単に組み合わせることができるArrayクラスです。関数のパラメータは、配列の各メンバー間に配置するテキストです。