Angular Ant Design NG Zorro Table-无法显示数据

Question

我目前正在开发一个 Entity Framework 项目，我正在使用 nSwagStudio 链接到服务中创建的模型

所以在客户端，我只导入 nSwag 创建的文件。

在我的 Angular component.ts 中我有:

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

在调试中它看起来像这样:

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

这是用来创建新配件的函数

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

在我的 component.html 中有

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

我的问题是，虽然我可以插入一个新的配件，但表中没有显示

当我在不使用 nz-table 的情况下创建一个普通表时，工作正常:

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

知道为什么吗？

如能提供帮助，不胜感激!

Answer 1

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

应该可以解决问题。如果 .ts 没问题，并且您获得了正确的数据，那么这就是有问题的行。