angular - 表格单元格中逗号后的angular2新行

Question

我正在使用 *ngFor 从 mongoDB 动态填充表。在其中一个单元格中，我有一个字符串数组，例如 string1、string2、string3、string4。如何将字符串显示为：
string1、
string2 、 string3 、
string4

这是我的代码：

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

在我的 component.ts 我正在做

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

谢谢您的帮助。

Answer 1

您可以使用嵌套的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>

Answer 2

在地图中加入字符串，然后在表格中使用innerHTML属性进行绑定

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