Невозможно отобразить данные JSON с угловой интерполяцией

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 </p>

Что я здесь делаю, это неправильно?

Answer 1

Здесь вы пропустили запятую после '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>

Вот демонстрация на Stackblitz

Answer 2

при первом запуске приложения эта переменная имеет значение null или undefiend: messages [0] .messages [0] .messageId

, пожалуйста, объявите или установите * ngIf для этого div

как этот

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