In Angular, use the ngFor directive to iterate through items in a collection and add a character to each item except

Question

Currently, I am iterating through my data list and displaying it in the view using spans:

<span *ngFor="let d of myData"> {{d.name}}, </span>

As shown above, I am adding a comma ',' at the end of each item to ensure a coherent display.

This results in the following appearance:

AAA, BBB, CCC, DDD,

However, I am facing an issue with **the last comma that I want to automatically remove.

Any suggestions on how to achieve this?

angular typescript angular5 angular6 angular2-template

Answer 1

Answer №1

To implement this functionality, utilize the last local variable as shown below:

<span *ngFor="let d of myData; last as isLast"> {{d.name}} <span *ngIf="!isLast">,</span></span>

Answer 2

To implement this functionality, utilize the last local variable as shown below:

<span *ngFor="let d of myData; last as isLast"> {{d.name}} <span *ngIf="!isLast">,</span></span>

Answer 3

To identify the final piece of data, utilize the most recent operator (assigning it to last) and showcase it only if it is not the last one.

<span  *ngFor="let dof myData; last as isLast"> {{d.name}} 
    <span *ngIf="!isFirst"> , </span>
</span>

Answer 4

To identify the final piece of data, utilize the most recent operator (assigning it to last) and showcase it only if it is not the last one.

<span  *ngFor="let dof myData; last as isLast"> {{d.name}} 
    <span *ngIf="!isFirst"> , </span>
</span>