Angular Ant 設計 NG Zorro 表 - 無法顯示數據

Question

我目前正在開發一個實體框架項目，我正在使用 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 = [];
}

這是用於創建新配件的 function

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

在我的組件中。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>

知道為什么嗎？

如果您能提供幫助，不勝感激！

Answer 1

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

應該解決問題。 If.ts 很好，並且您獲得了正確的數據，這是有問題的行。

Answer 2

問題是您使用推送方法來構建 object。

this.artigo.acessorios.push(acessorio);

根據該博客條目，它不起作用： https://blog.spacepatroldelta.com/a?ID=01600-824cccdd-6e64-4c6a-bc32-4c18efd53845

在 NzTable 數據中使用 push 不會生效。

這應該有效：

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

      this.clearInputsAcessorios();
   }

在 HTML 中：

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