angular2 new line after comma in table cell

Question

I am using *ngFor to dynamically populate a table from a mongoDB. In one of the cells I have an array of strings like string1,string2,string3,string4. How do I display the strings as:
string1,
string2,
string3,
string4

Here is my code:

 <tbody>
    <tr *ngFor="let audit of audits ">
        <td>{{ audit.installDate  | date:"medium" }}</td>
        <td>{{ audit.appName }}</td>
        <td>{{ audit.environment }}</td>
        <td>{{ audit.userName }}</td>
        /*This is the line with the string[]
        <td>{{ audit.fqdNs }}</td>
    </tr>
</tbody>

In my component.ts I am doing

export class HomeComponent implements OnInit {
public audits: AuditItem[];

constructor(private _dataService: AuditService) {
}    

ngOnInit() {
    this._dataService
        .getAll()
        .subscribe((data: AuditItem[]) => this.audits = data,
        error => console.log(error),
        () => console.log("getAllItems() complete from init " + this.audits ));
}

Thank you for your help.

Answer 1

you can use a nested ngFor.

<tbody>
  <tr *ngFor="let audit of audits ">
      <td>{{ audit.installDate  | date:"medium" }}</td>
      <td>{{ audit.appName }}</td>
      <td>{{ audit.environment }}</td>
      <td>{{ audit.userName }}</td>
      <td>
        <div *ngFor="let fqdN of audit.fqdNs; let lastItem = last">
          <span>{{fqdN}}</span><span *ngIf="!lastItem">,</span>
        </div>
      </td>
  </tr>
</tbody>