Question

我是Angular2的新手，所以非常感谢任何帮助。

我以list<user>的形式获取数据。每个用户都有一个角色列表。所以在打字稿中我创建了这个用户类型：

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

我正在解析上述类型的数据。 'users'是该组件中的数组users: Array<User>;。

将我想要列出Role[]的数据显示为逗号分隔值，例如<td>admin, customer, writer</td>，

但我得到的是：

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

上面的那一行表示要为<td>数组的每个元素重复Role标记，这就是为什么你会得到你正在看到的行为。

如果您只想获得逗号分隔的角色列表，您可能只想在角色数组上使用简单的函数调用，例如：

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

join是标准JavaScript Array类的一个函数，它允许您简单地组合数组的元素。函数的参数是您要在数组的每个成员之间放置的文本。

Angular 2 DataBinding显示相同的列表

1 个答案: