table 单元格中逗号后的 angular2 新行

Question

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

这是我的代码：

 <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

在 map 中加入字符串，然后在 table 中使用 innerHTML 属性绑定

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

table 单元格中逗号后的 angular2 新行

angular2 new line after comma in table cell

angular-pipe

angular