如何在表格Angular中将数组显示为列表答案

【问题标题】：How to display array as a list in a table Angular如何在表格Angular中将数组显示为列表
【发布时间】：2021-03-22 12:32:00
【问题描述】：

我有一个包含 1 个元素的列表，看起来像这样

picture of array and contents

我想在表格中显示数据，标题为作者姓名和标题。但是我的代码在一行上显示了所有标题，而不是为每个标题和作者姓名创建更多行。我怎样才能做到这一点？

Table I have with the following code

<table class='table table-striped' aria-labelledby="tableLabel" *ngIf="authorWithBooks">
  <thead>
    <tr>
      <th>Author Name</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let authorWithBook of authorWithBooks">
      <td>{{ authorWithBook.authorName }}</td>
      <td>{{ authorWithBook.bookNameList }}</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

标签： c# html css angular html-table

【解决方案1】：

您需要两个循环：每个作者第一个循环，每个书名第二个循环。 trs 将从第二个循环创建。第一个循环不需要创建任何 HTML，因此它会进入一个 <ng-container> 元素。

这个：

   <ng-container *ngFor="let authorWithBook of authorWithBooks">
    <tr *ngFor="let bookName of authorWithBook.bookNameList">
      <td>{{ authorWithBook.authorName }}</td>
      <td>{{ bookName }}</td>
    </tr>
    </ng-container>

这是工作的StackBlitz

【讨论】：