Angular Ant Desing NG Zorro Table- Not able to display data

Question

I am currently developing an entity framework project, and I am using nSwagStudio to link to the models created in the service

So in the client side I just import the file created by nSwag.

In my Angular component.ts I have:

import { Artigo, Acessorio} from 'src/app/services/api';


artigo: Artigo = new Artigo();

// artigo {
//   referencia: -> string,
//   descricao: -> string,
//   acessorios: []
// }
// 
// acessorios {
//    descricao: string,
//    quantidade: -> number,
//    preco: -> number  
// }

In Debugging it looks like this:

ngOnInit(){
   this.artigo.acessorios = [];
}

This is the function used to create new acessorio

createNewAcessorio() {

  var acessorio: Acessorio = new Acessorio();

  acessorio.descricao = this.novoAcessorioDescricao;
  acessorio.quantidade = this.novoAcessorioQuantidade;
  acessorio.preco = this.novoAcessorioPreco;
  this.artigo.acessorios.push(acessorio);

  this.clearInputsAcessorios();
}

In my component.html I have

 <nz-table #acessoriosTable nzSize="small" [nzData]="artigo.acessorios">
                <thead>
                    <tr>
                        <th>Descrição</th>
                        <th>Quantidade</th>
                        <th>Preço</th>
                        <th>Opções</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of acessoriosTable.data;">
                        <td>{{data.descricao}}</td>
                        <td>{{data.quantidade}} UN</td>
                        <td>{{data.preco}} €</td>
                        <td>
                            <a>Editar</a>
                            <nz-divider nzType="vertical"></nz-divider>
                            <a>Eliminar</a>
                        </td>
                    </tr>
                </tbody>
            </nz-table>

My problem is that although I can insert a new acessorio is not shown in the table

and when I create a normal table without using the nz-table, works fine:

             <table>
                <thead>
                    <tr>
                        <th>Descrição</th>
                        <th>Quantidade</th>
                        <th>Preço</th>
                        <th>Opções</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of artigo.acessorios;">
                        <td>{{data.descricao}}</td>
                        <td>{{data.quantidade}} UN</td>
                        <td>{{data.preco}} €</td>
                        <td>
                            <a>Editar</a>
                            <nz-divider nzType="vertical"></nz-divider>
                            <a>Eliminar</a>
                        </td>
                    </tr>
                </tbody>
            </table>

Any idea why?

Grateful if you can help!

Answer 1

<tr *ngFor="let data of acessoriosTable.data">

should resolve the problem. If.ts is fine and you're getting the right data this is the problematic line.

Answer 2

The problem is that you use push method for building the object.

this.artigo.acessorios.push(acessorio);

It doesn't work according to that blog entry: https://blog.spacepatroldelta.com/a?ID=01600-824cccdd-6e64-4c6a-bc32-4c18efd53845

Using push will not take effect in NzTable data.

This should work:

    createNewAcessorio() {
    
      // (...)
      this.artigo.acessorios.push(acessorio);
      
      this.dataModel = this.artigo.acessorios;

      this.clearInputsAcessorios();
   }

and in HTML:

<tr *ngFor="let data of dataModel">