TypeScript，Angular如何将列表中对象的属性转换为字符串分隔的逗号

Question

我有一个用ngFor Angular 5在HTML中显示的人员对象数组。

useETagAsContinuation

Person对象包含一个Role数组，如下所述：

persons:Array<Person>=[];

在HTML中，我正在使用ngFor来获取div标签中的person数组。我想为每个人获取角色标签的字符串分隔逗号，并在div中显示。

我想要这样的东西：

export class Role{
    id:string
    label:string;   
}

export class Person{
   // many attributes
   roles:Array<Person>;

}

感谢帮助

Answer 1

您可以在标记中的角色上使用join

<div *ngFor='let person of persons'>
   <p> {{ person.roles.join(',') }} </p>
</div>

Answer 2

您可以先将角色映射到角色名称，然后将它们结合在一起。

<div *ngFor='let person of persons'>
    <p> {{ person.roles.map(role => role.label).join(',') }} </p>
</div>

如果角色可以不确定或为null，则也应避免这种情况。

<div *ngFor='let person of persons'>
    <p> {{ (person.roles || []).map(role => role.label).join(',') }} </p>
</div>

Answer 3

此代码使我感到困惑：

 <div>
    <ng-container *ngFor="let role of person.roles"> 
        {{role.label}} + ","
    </ng-container>
 </div>