angular2 nouvelle ligne après la virgule dans la cellule

Question

J'utilise * ngFor pour remplir dynamiquement une table à partir d'un mongoDB. Dans l'une des cellules, j'ai un tableau de chaînes comme string1, string2, string3, string4. Comment afficher les chaînes comme:
chaine1,
chaine2,
string3,
string4

Voici mon 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> 

Dans mes component.ts que je fais

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)); 
} 

Nous vous remercions de votre aide.

Answer 1

vous pouvez utiliser un ngFor imbriqué.

<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> 

Answer 2

Rejoignez la chaîne avec la carte et après l'utilisation de la table propriété innerHTML pour lier

this._dataService 
    .getAll() 
    .map(x => Object.assign({}, x, {fqdNs: x.fqdNs.join("</br>")}))