無法使用角度插值顯示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

我在這里做什么不正確？

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之后的逗號'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的演示