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

问题描述

我目前正在开发一个实体框架项目，我正在使用 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>

我的问题是虽然我可以插入一个新的 acessorio 没有显示在表中

当我在不使用 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>

知道为什么吗？

如果能帮到你，不胜感激！

解决方法

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

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