我怎么能用 ngFor 来设计这个（可能是嵌套的）table

Question

我有一个 Object Array，它有一个键，然后有一个数组作为它的值。像这样：

[
{key: 'example@example.com', value: ['message1', 'message2']}
]

我以前使用这样的对象进行过这项工作

[
{key: 'example@example.com', value: 'message'}
]

但我想更改一些功能，所以我改为将值改为数组。

我想创建一个看起来像这样的table

|       User Email       |       Result        |
|  example@example.com   |       message1      |
|                        |       message2      |
|  example1@example.com  |       message1      |
|                        |       message2      |

它可以是嵌套的 table 或者它可以只显示 table 单元格中的两条消息。我不太挑剔。

我试过嵌套 table，但这没有用。我不确定如何使用第二个 ngFor 来做这样的事情。

这是我的 html，它与 Object Array 一起工作，它的值

没有数组

<div class="container" style="text-align:center">
  <br />
  <h1>Results</h1>

  <head>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        align: center;
      }
    </style>
  </head>
  <body>
    <table style="width:50%" align="center">
      <tr>
        <th *ngFor="let col of displayedColumns">
          {{ col }}
        </th>
      </tr>
      <tr *ngFor="let item of userResults | keyvalue">
        <td>{{ item.key }}</td>
        <td>{{ item.value }}</td>
      </tr>

      <tr></tr>
    </table>
  </body>

我尝试将 item.value 行更改为另一个 table 和另一个 ngFor，但没有打印任何内容。

如有任何想法，我们将不胜感激

Answer 1

你很亲近；你应该只需要在你的第二个标签中使用另一个 *ngFor 指令，就像这样...

<td>
    <span *ngFor="let val of item.value" style="display:inline-block">
        {{ item.value }}
    <span>
</td>

所以你的最终 table 看起来像...

<div class="container" style="text-align:center">
  <br />
  <h1>Results</h1>

  <head>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        align: center;
      }
    </style>
  </head>
  <body>
    <table style="width:50%" align="center">
      <tr>
        <th *ngFor="let col of displayedColumns">
          {{ col }}
        </th>
      </tr>
      <tr *ngFor="let item of userResults | keyvalue">
        <td>{{ item.key }}</td>
        <td>
            <span *ngFor="let val of item.value" style="display:inline-block">
                 {{ item.value }}
            <span>
        </td>
      </tr>
      <tr></tr>
    </table>
  </body>

Answer 2

您不需要使用 keyvalue 管道。键值管道用于将对象转换为键值对数组，因此使用它会在 table 中给出不正确的值。另一方面，您有一个普通的对象数组，其中一个属性包含一个数组。这种格式非常适合嵌套 ngFor.

将您的 table 更改为以下代码

<table style="width:50%" align="center">
  <tr>
    <th *ngFor="let col of displayedColumns">
      {{ col }}
    </th>
  </tr>
  <tr *ngFor="let item of userResults">
    <td>{{ item.key }}</td>
    <td>
      <div *ngFor="let value of item.value">
       {{ value }}
      </div>
    </td>
  </tr>
  <tr>
</table>

在您的 css 中添加一个 vertical-align 以使单元格中的数据保持在顶部。

table,
th,
td {
  border: 1px solid black;
  align: center;
  vertical-align: top;
}

这是 stackblitz

上的一个工作示例

编辑：根据评论中的要求，要添加html内容，请在div上使用innerHTML，如下所示[=18] =]

<div *ngFor="let value of item.value" [innerHTML]="value">
</div>

我怎么能用 ngFor 来设计这个（可能是嵌套的）table

How could I use ngFor to design this (maybe nested) table

html

javascript

nested-table

ngfor

angular