Question

在我的Angular应用中，我试图显示以下JSON中的数据：

conversations: [
{
  'conversationdId': 1,
  'conversationTitle': 'My first convo',
  messages: [
    {
      'messageId': 1,
      'messageText': 'Hi'
    },
    {
      'messageId': 2
      'messageText': 'Hello'
    }
  ]
},
{
  'conversationdId': 2,
  'conversationTitle': 'My second convo',
  messages: [
    {
      'messageId': 1,
      'messageText': 'asdfasdfasdf'
    },
    {
      'messageId': 2
      'messageText': 'qwerqwerqwer'
    }
  ]
}
];

我尝试了以下HTML：

<h2>
  {{conversations[0].messages[0].messageId}}
</h2>

但是我在控制台中收到此错误：

TypeError：_co.conversations未定义堆栈跟踪： View_ConversationsComponent_0 / <@ng：///AppModule/ConversationsComponent.ngfactory.js：11：9

我在这里做什么不正确？

Answer 1

首次运行的应用此变量为null或undefiend：conversations [0] .messages [0] .messageId

请为此div声明或设置* ngIf

像这样

<h2 *ngIf="conversations[0].messages[0].messageId">
  {{conversations[0].messages[0].messageId}}
</h2>

Answer 2

您在'messageId': 1之后错过了逗号，还需要在ngOnInit方法内初始化数据，以免出现此错误。

component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';

  conversations;
  ngOnInit() {
    this.conversations = [
      {
        'conversationdId': 1,
        'conversationTitle': 'My first convo',
        messages: [
          {
            'messageId': 1,
            'messageText': 'Hi'
          },
          {
            'messageId': 2,
            'messageText': 'Hello'
          }
        ]
      },
      {
        'conversationdId': 2,
        'conversationTitle': 'My second convo',
        messages: [
          {
            'messageId': 1,
            'messageText': 'asdfasdfasdf'
          },
          {
            'messageId': 2,
             'messageText': 'qwerqwerqwer'
          }
        ]
      }
    ];
  }
}

component.html

 <h2>
  {{conversations[0].messages[0].messageId}}
</h2>

Here is demo on Stackblitz

无法使用Angular插值显示JSON数据

2 个答案: