Question

我的系统有问题。

基本上，我有一个实体：

import { Produto } from "./produto.model";
import { Empresa } from "./empresa.model";
import { Mensagem } from "./mensagem.model";

export class Nfe{

    public codNfe: number;
    public numeroNfe: number;
    public dataEmissao: Date;
    public valorTotal: number;
    public empresa: Empresa;
    public produtos: Array<Produto>;
    public mensagens: Mensagem;

    constructor(){};
}

一项服务：

  constructor(private http: Http) { }

      public getNFE(numero: string): Promise<Nfe>{
        return this.http.get(`${URL_API}nfe?numeroNfe=${numero}`)
          .toPromise()
          .then((response: any) => {
            return response.json()
          });
      }

观点：

export class ExibirNfeComponent implements OnInit {

  public nfe: Nfe;
  constructor(private service: NfeService) { 

  }

  ngOnInit() {
    this.service.getNFE('26180406057223028939650050000133071050336085')
    .then((nfe: Nfe) => {
      this.nfe = nfe;
    })
  }

}

<div class="row">
  <div class="col-sm-2">Id: {{nfe.codNfe}}</div>
</div>

当我呼叫我的屏幕时，我收到此错误：

错误TypeError：无法读取未定义的属性'codNfe'

我认为这是因为服务需要一些时间才能响应。我需要一种方法让视图等待我的对象变满。

我该怎么做？

更新1

我放了一些控制台日志：

  ngOnInit() {
    console.log('Begin OnInit')
    console.log(this.nfe)
    this.service.getNFE('26180406057223028939650050000133071050336085')
    .then((nfe: Nfe) => {
      this.nfe = nfe;
      console.log(this.nfe)
    });
    console.log('End OnInit');
  }

查看结果： enter image description here

Answer 1

在定义之前，您正在模板中使用nfe变量。

{{nfe.codNfe}}

这就是消息告诉你的内容。您必须在使用之前进行检查。通过添加?可以有一个快捷方式。

将该部分更改为

{{nfe?.codeNfe}}

问号将检查nfe是否未定义或为空，只有在没有时才会访问codeNfe。

Answer 2

我发现了问题。这只是我的JSON框架。结构是一个矩阵，我的应用程序收到了一个对象。

感谢您的一切

Angular IO：承诺的回归

2 个答案: