如何自动创建表？使用 html+angular+typescript答案

【问题标题】：How to create a table automatically? Using html+angular+typescript如何自动创建表？使用 html+angular+typescript
【发布时间】：2021-08-16 13:42:23
【问题描述】：

我正在尝试使用 Angular 和 HTML 自动创建一个表格。我使用 PHP 从 mysql 数据库中获取数据，Angular 可以通过 JSON 看到它们。

在 admin.component.html 文件中，我以这种方式使用 *ngFor 创建表：

<div fxFlex fxLayoutAlign = "center" style="margin-top: 50px;">
    <table cellpadding="5px">
      <thead>
        <th>Nome</th>
        <th>Tipologia</th>
        <th>Ingredienti</th>
        <th>Allergeni</th>
      </thead>
      <tbody>
        <tr *ngFor="let element of piatto;">
          <td>{{element.NomeP}}</td>
          <td>{{element.Tipo}}</td>
          <td *ngFor="let i of element.Ingredienti;" >{{i.NomeI}}</td>
          <td *ngFor="let a of element.Allergeni;" >{{a.NomeA}}</td>
        </tr>
      </tbody>
    </table>
  </div>

输出是：

output

我想以这种方式显示表格：

<table cellpadding="20px">
  <thead>
    <th>Nome</th>
    <th>Tipologia</th>
    <th>Ingredienti</th>
    <th>Allergeni</th>
  </thead>
  <tbody>
    <tr>
      <td>Tagliolini al salmone</td>
      <td>Primo</td>
      <td>Pasta, Salmone</td>
      <td>Glutine, Pesce</td>
    </tr>
    <tr>
      <td>Macedonia</td>
      <td>Dessert</td>
      <td>Mela, Banana</td>
      <td>Frutta</td>
    </tr>
  </tbody>
</table>

我该怎么办？

这里有来自 piatto.models.ts 的“piatto”定义：

export class Piatto{
CodP !: number;
NomeP !: string;
Tipo !: string;
Ingredienti !: Array<any>;
Allergeni !: Array<any>; }

这里有“piatto”包含的内容：

(2) [{…}, {…}]
  0:
    Allergeni: Array(2)
      0: {CodA: "1", NomeA: "Glutine"}
      1: {CodA: "4", NomeA: "Pesce"}
      length: 2
      __proto__: Array(0)
    CodP: "1"
    Ingredienti: Array(2)
      0: {CodI: "3", NomeI: "Pasta", CodA: "1"}
      1: {CodI: "8", NomeI: "Salmone", CodA: "4"}
      length: 2
      __proto__: Array(0)
    NomeP: "Tagliolini al salmone"
    Tipo: "Primo"
    __proto__: Object
  1:
    Allergeni: Array(1)
      0: {CodA: "8", NomeA: "Frutta a guscio"}
      length: 1
      __proto__: Array(0)
    CodP: "5"
    Ingredienti: Array(2)
      0: {CodI: "9", NomeI: "Mela", CodA: "8"}
      1: {CodI: "10", NomeI: "Banana", CodA: null}
      length: 2
      __proto__: Array(0)
    NomeP: "Macedonia"
    Tipo: "Dessert"
    __proto__: Object
  length: 2
__proto__: Array(0)

【问题讨论】：

标签： html node.js json angular typescript

【解决方案1】：

由于*ngFor 被放置在td 标签上，它最终会创建多个td 标签，每个标签对应element.Ingredienti 和element.Allergeni 中的每个元素。您想要的是在单个 td 中显示整个 element.Ingredienti 数组。因此，在单个 td 中生成一些其他标签是可行的方法。

这样的事情应该可以解决您的问题

    <td> <span *ngFor="let i of element.Ingredienti;" >{{i.NomeI}} </span> </td>
    <td> <span *ngFor="let a of element.Allergeni;" >{{a.NomeA}} </span> </td>

【讨论】：