TypeScript, Angular how to convert attribute of an object in list to string separeted comma

Question

I have an array of person objects that I displayed in HTML using ngFor Angular 5.

persons:Array<Person>=[];

the Person objects contains an Array of Role object described as below:

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

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

}

In the HTML i am using ngFor to fetch the persons Array in div tag. and I want to get string separated comma of the roles's label for each person and display it in div.

I want something like that:

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

Thanks for help

Suren Srapyan · Accepted Answer · 2018-08-09 04:55:06Z

2

You can just use join on the roles in the markup

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

edited Aug 9, 2018 at 4:55

answered Aug 8, 2018 at 14:39

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sk555 Over a year ago

Thanks for answering my issue, but this not what I mean roles contains label and id. An i want string separated comma of label attribute @Suren Srapyan

sk555 Over a year ago

@Suren_Srapyan I mean roles contains label and id. An i want string separated comma of label attribute

tom van green · Accepted Answer · 2018-08-08 15:28:18Z

0

You can map your roles to role names first and then join them together.

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

If roles can be undefined or null you should also guard against that case.

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

answered Aug 8, 2018 at 15:28

tom van green

1,73410 silver badges16 bronze badges

1 Comment

tom van green Over a year ago

Hmm, I am not entirely sure this will work, as this is using arrow function (the role => role.label part) and I am not sure if this is supported in angular template expression syntax. If this does not work you might have to transform your data in your component or create a custom pipe in order to do the transformation.

sk555 · Accepted Answer · 2018-08-09 17:03:36Z

0

This code relves my probelm:

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

answered Aug 9, 2018 at 17:03

sk555

8982 gold badges10 silver badges24 bronze badges

Collectives™ on Stack Overflow

TypeScript, Angular how to convert attribute of an object in list to string separeted comma

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related