How to create a table automatically? Using html+angular+typescript

Question

I'm trying to create a table automatically using Angular and HTML. I take data from a mysql database using PHP, and Angular can see them thanks to JSON.

In admin.component.html file I create the table using *ngFor in this way:

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

and the output is:

output

I would like to display the table in this way:

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

How can I do?

Here there is "piatto" definition from piatto.models.ts:

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

And here there is what "piatto" contains:

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

Etheraex · Accepted Answer · 2021-05-28 09:59:18Z

1

Since *ngFor is placed on the td tag it ends up creating multiple td tags, one for each element within element.Ingredienti and element.Allergeni. What you want is to display the whole element.Ingredienti array within a single td. So generating some other tag within a single td is the way to go.

Something like this should solve your issue

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

answered May 28, 2021 at 9:59

Etheraex

5266 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create a table automatically? Using html+angular+typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related