Angular 6 json对象管道不显示数据答案

【问题标题】：Angular 6 json object pipe not display dataAngular 6 json对象管道不显示数据
【发布时间】：2018-10-31 10:33:52
【问题描述】：

我有一个试图显示项目任务的 html 文件。这些任务包含在我从 MongoDB 获得的项目模式内的 ref 数组中。当我尝试下面的代码时：

<div class="card-body">
    {{project.taskName | json}}
</div>

这样显示整个任务对象

[ { "project": [ "5bd973fe33bd3a09586c8eb2" ], "user": [], "_id": "5bd9776833bd3a09586c8eb3", "taskName": "测试任务", "taskDescription": "这个任务是一个测试" , "__v": 0 } ]

如果我尝试 {{project.task.taskName | json }} 什么都没有显示。如何让 html 显示任务名称和描述？谢谢！

编辑：我收到的 json 负载

[
    {
        "team": [],
        "task": [
            {
                "project": [
                    "5bd973fe33bd3a09586c8eb2"
                ],
                "user": [],
                "_id": "5bd9776833bd3a09586c8eb3",
                "taskName": "Test task",
                "taskDescription": "This task is a test",
                "__v": 0
            }
        ],
        "_id": "5bd973fe33bd3a09586c8eb2",
        "projectName": "Test project",
        "projectDescription": "This is a test project",
        "__v": 1
    }
]

【问题讨论】：

标签： html json angular mongodb

【解决方案1】：

最好有一个小的function，它只获取所需的属性，例如taskName 和taskDescription。

 getCustomProjects() {
    return this.project.map(p => {
      return {
        name: p.taskName,
        taskDescription: p.taskDescription
      }
    });
  }

html

<div class="card-body">
    {{ getCustomProjects() | json}}
</div>

注意：如果在 ts 中而不是 html 中，您可以调用 getCustomProjects 并构造新数组。

工作演示在这里 - https://stackblitz.com/edit/angular-2chhvd

【讨论】：

【解决方案2】：

我怀疑问题出在您的有效负载（项目）是一个数组这一事实。

这应该可以正常工作： {{ project.taskName[0].taskName | json }}

希望有帮助

【讨论】：

感谢您的帮助，但仍然没有任何返回。还有什么我可以尝试的吗？
哦等你显示 project.taskName 它给你数组？然后也许 {{ 项目。任务名称[0].任务名称 | json }} 也许可以改进有效负载结构。你有相关的课程吗？它可以帮助理解模型。
这完美！非常感谢你的帮助伙伴

【解决方案3】：

您可以使用 JSON {{project.task | json }} 管道对象。在您的情况下， project.task.taskName 不是一个对象，它是一个字符串。所以不需要管道 JSON。你可以简单地使用 {{ project.taskName }}

【讨论】：

感谢有效载荷。这里的任务不是一个对象，它是一个数组，所以你必须使用 *ngFor 对其进行迭代

【解决方案4】：

你不应该使用带有点运算符的|json，如果你需要打印整个对象，使用

<div class="card-body">
    {{project | json}}
</div>

如果你需要任务名称

<div class="card-body">
    {{project.taskName}}
</div>

编辑

你需要使用索引来访问，因为它是一个数组

   <div class="card-body">
        {{project[0].taskName}}
   </div>

【讨论】：

当我尝试它时它仍然没有返回任何东西
应该可以，标记的答案和我的没有区别

【解决方案5】：

这段代码对我有用

array

abc = [
    {
      'team': [''],
      'task': [
        {
          'project': [
            '5bd973fe33bd3a09586c8eb2'
          ],
          'user': [''],
          '_id': '5bd9776833bd3a09586c8eb3',
          'taskName': 'Test task',
          'taskDescription': 'This task is a test',
          '__v': 0
        }
      ],
      '_id': '5bd973fe33bd3a09586c8eb2',
      'projectName': 'Test project',
      'projectDescription': 'This is a test project',
      '__v': 1
    }
    ];

html

<div class=="card-body">
  {{abc[0].task[0].taskName}}
</div>

【讨论】：