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

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

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

---

不应将| json与点运算符一起使用，如果需要打印整个对象，请使用

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

{{project | json}}

如果您需要taskName

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

{{project.taskName}

编辑

您需要使用索引进行访问，因为它是一个数组

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

{{project[0].taskName}

您可以使用JSON管道对象

{{project.task | JSON}

。 在您的例子中，project.task.taskName不是一个对象，而是一个字符串。因此，不需要管道JSON。你可以简单地使用

{{project.taskName}}

最好是有一个小的

函数

，它只获取所需的属性，如

taskName

和

tasksdescription

html

{{getCustomProjects（）| json}}

注意：您可以调用

getCustomProjects

并在ts而不是html中构造新数组

---

正在运行的演示在这里-

我怀疑问题来自于您的负载（项目）是一个阵列这一事实

这应该很好： {{project.taskName[0].taskName | json}

---

希望对我有帮助

这段代码对我有用

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

{{abc[0]。任务[0]。任务名称}

谢谢你的有效载荷。这里task不是一个对象，它是一个数组，所以你必须使用*ngit对它进行迭代，因为当我尝试它时，它仍然没有返回任何东西。它应该可以工作，标记的答案和我的答案没有区别。感谢你的帮助伙伴，但仍然没有返回任何东西。还有什么我可以试试的吗？哦，等等，你显示project.taskName，它会给你数组吗？然后可能{{project.taskName[0].taskName | json}可能有效负载结构可以改进。你有相关的课程吗？这有助于理解模型。这非常有效！非常感谢你的帮助，伙计

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

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

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
    }
    ];

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