如何解决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 没问题并且您获得了正确的数据,这就是有问题的行。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。