Question

我有一个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
    }
]

Answer 1

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

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

如果您需要taskName

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

编辑

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

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

Answer 2

您可以使用JSON {{project.task | json }}来管道对象。在您的情况下， project.task.taskName 不是对象，而是字符串。因此，不需要管道JSON。您可以简单地使用 {{ project.taskName }}

Answer 3

最好是有一个小的taskMoveRight(id) { state.columns.forEach((column, columnIndex) => { if (state.columns[state.columns.length - 1] !== column) { if (column.cards) { column.cards.forEach((card, cardIndex) => { if (card.id === id) { // Create target column card collection if (!state.columns[columnIndex + 1].cards) { state.columns[columnIndex + 1].cards = Array.of(); } // Add card to the target column card collection state.columns[columnIndex + 1].cards.push(card); // Remove the card from the source column card collecion state.columns[columnIndex].cards.splice(cardIndex, 1); } }); } } }); }，它只能获得所需的属性，例如function和taskName。

taskDescription

html

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

注意：如果使用ts而不是html，则可以调用<div class="card-body"> {{ getCustomProjects() | json}} </div>并构造新的数组。

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

Answer 4

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

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

希望有帮助

Answer 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>

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

5 个答案: