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

【问题标题】：Unable to display JSON data with Angular interpolation无法使用 Angular 插值显示 JSON 数据
【发布时间】：2019-03-19 10:15:49
【问题描述】：

在我的 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/

我在这里做什么不正确？

【问题讨论】：

你在哪里填写conversations数组？里面ngOnInit()?
虽然这不是一个有效的 json
也使用安全导航运算符 {{conversations[0]?.messages[0]?.messageId}}
你也没有分配任何值使用=而不是:
如果能解决您的问题，请查看答案

标签： arrays json angular

【解决方案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>

Here is demo on Stackblitz

【讨论】：

【解决方案2】：

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

请为此 div 声明或设置 *ngIf

喜欢这个

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

【讨论】：

嗨，我试过了，但我仍然遇到同样的错误