Question

我想在我的模板上打印一组对象，但是我在尝试这样做时遇到了一些问题。这是数组historico

的json

{
      "id": 2,
      "tipo_negociacao": "Cobrança",
      "historico": [
        {
          "fl_usuario": "",
          "created_at": "",
          "updated_at": "",
          "created_by": null,
          "updated_by": null,
          "texto": "Proposta realizada valor de R$666666666"
        },
        {
          "texto": "Proposta no valor de R$:5762recusada"
        },
        {
          "texto": "Proposta realizada valor de R$6750"
        },
    }

因此，正如您所看到的，historico是一个对象数组，我想要做的是在屏幕上打印所有texto值。这是模板的一部分，我尝试打印它：

<div *ngFor="let historico of disputa">
  <p> Negociação não iniciada </p>
  <p *ngFor="let historico of disputa.historico"> {{historico.texto}} </p>
</div>

我使用它来使用来自disputa的数据：

this.route.params.subscribe(params =>{
  let id = params['id'];
  this.service
  .buscaPorId(id)
  .subscribe(disputa => {
    this.disputa = disputa;
  },
  erro => console.log(erro));
})

我收到此错误：

找不到不同的支持对象＆＃39; [object Object]＆＃39;类型＆＃39;对象＆＃39 ;. NgFor仅支持绑定到Iterables，例如Arrays。

有人能帮助我吗？提前致谢

Answer 1

您获得的错误是因为您拥有外部ngFor：

<div *ngFor="let historico of disputa">

disputa是一个Object，因此不能迭代。

只需删除那个外部迭代，你就可以了，所以你的模板应该是这样的：

<p *ngFor="let historico of disputa.historico"> {{historico.texto}} </p>

这是一个

Demo

Answer 2

<p *ngFor="let historico of disputa.historico"> {{historico.texto}} </p>

应该是

<p *ngFor="let data of historico.historico"> {{data.texto}} </p>

第一个historico中的ngFor变量已经指向迭代中的当前对象。

// Or even better, change the name of the variable in the outermost loop
// so that you have the correct context in the inner loop.

<div *ngFor="let data of disputa">  <--- historico is already in context
  <p> Negociação não iniciada </p>
  <p *ngFor="let historico of data.historico"> {{historico.texto}} </p>
</div>

<强>更新

可能存在角度无法识别传入数据是数组的可能性。在将其输入之前，明确地尝试将其转换为数组。

<p *ngFor="let historico of convertToArray(data.historico)"> {{historico.texto}} </p>

在您的组件中。

convertToArray(arrayObj) {
  return Array.from(arrayObj);
}

打印对象数组

2 个答案:

Demo