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

【问题标题】：TypeScript, Angular how to convert attribute of an object in list to string separeted commaTypeScript，Angular如何将列表中对象的属性转换为字符串分隔的逗号
【发布时间】：2018-08-08 14:36:38
【问题描述】：

我有一组人员对象，我使用 ngFor Angular 5 在 HTML 中显示。

persons:Array<Person>=[];

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

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

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

}

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

我想要这样的东西：

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

感谢您的帮助

【问题讨论】：

标签： angular typescript angular5

【解决方案1】：

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

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

【讨论】：

感谢您回答我的问题，但这不是我的意思，角色包含标签和 ID。我想要标签属性的字符串分隔逗号@Suren Srapyan
@Suren_Srapyan 我的意思是角色包含标签和 ID。我想要标签属性的字符串分隔逗号

【解决方案2】：

您可以先将您的角色映射到角色名称，然后再将它们连接在一起。

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

如果角色可以是未定义的或为空的，你也应该注意这种情况。

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

【讨论】：

嗯，我不完全确定这会起作用，因为这是使用箭头函数（role => role.label 部分），我不确定角度模板表达式语法是否支持它。如果这不起作用，您可能必须转换组件中的数据或创建自定义管道才能进行转换。

【解决方案3】：

这段代码解决了我的问题：

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

【讨论】：