각도 2 데이터 바인딩 목록을 동일하게 표시 <td></td>

Question

나는 Angular2를 처음 사용하므로 어떤 도움을 주셔서 감사합니다.

데이터를 list<user> 형태로 표시합니다. 각 사용자에게는 역할 목록이 있습니다. 그래서 typescript에서이 사용자 유형을 만들었습니다 :

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

위의 유형 양식의 데이터를 구문 분석하고 있습니다. '사용자'는 해당 구성 요소의 배열 users: Array<User>;입니다. 는 I가 <td>admin, customer, writer</td> 같은 쉼표로 구분 된 값에 Role[]을 나열 할 데이터,

하지만 내가 대신 얻고 표시

는

입니다 : 여기

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

내가 노력하고 코드입니다 :

<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는 표준 자바 스크립트 함수 배열 요소를 간단하게 결합 할 수있는 Array 클래스입니다. 함수의 매개 변수는 배열의 각 멤버 사이에 배치 할 텍스트입니다.