Angular Ant Design NG Zorro 表 - 无法显示数据答案

【问题标题】：Angular Ant Desing NG Zorro Table- Not able to display dataAngular Ant Design NG Zorro 表 - 无法显示数据
【发布时间】：2021-05-04 23:24:45
【问题描述】：

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

这是用于创建新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();
}

在我的 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>

知道为什么吗？

如果您能提供帮助，不胜感激！

【问题讨论】：

标签： angular entity-framework ng-zorro-antd nswagstudio

【解决方案1】：

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

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

【讨论】：

感谢您的回答！不幸的是它没有解决我的问题