Как отобразить массив в виде списка в таблице Angular

У меня есть список, содержащий 1 элемент, который выглядит так

картинка массива и содержимого

Я хочу отобразить данные в таблице с заголовками «Имя автора» и «Название». Но код, который у меня есть, показывает все заголовки в одной строке вместо создания дополнительных строк для каждого заголовка и имени автора. Как я могу этого добиться?

Таблица у меня есть со следующим кодом

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