Angular 6 json object pipe не отображает данные

У меня есть html-файл, который пытается отображать задачи для проекта. Задачи содержатся в массиве ref внутри схемы проекта, которую я получаю от MongoDB. Когда я пробую код ниже:

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

Он отображает весь объект задачи следующим образом

[ { "project": [ "5bd973fe33bd3a09586c8eb2" ], "user": [], "_id": "5bd9776833bd3a09586c8eb3", "taskName": "Test task", "taskDescription": "This task is a test", "__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
    }
]
0
0
1 460
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Вы не должны использовать | json с оператором точки, если вам нужно распечатать весь объект, используйте

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

если вам нужно taskName

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

РЕДАКТИРОВАТЬ

Вам нужно получить доступ с помощью индекса, так как это массив

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

Он по-прежнему ничего не возвращает, когда я пробую

Sharkows Abel 31.10.2018 11:50

Он должен работать, отмеченный ответ и мой не имеют разницы

Sajeetharan 31.10.2018 17:54

Вы можете передать объект по конвейеру, используя JSON {{project.task | json }}. В вашем случае project.task.taskName не является объектом, это строка. Таким образом, нет необходимости в конвейере JSON. Вы можете просто использовать {{ project.taskName }}

Спасибо за полезную нагрузку. Здесь задача - это не объект, это массив, поэтому вам нужно перебирать его, используя * ngFor

Nirnay Kulshreshtha 31.10.2018 11:42

The best would be to have a small function which gets only the desired properties like taskName and taskDescription.

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

html

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

Примечание: вы можете вызвать getCustomProjects и построить новый массив, если в ts вместо html.

Рабочая демонстрация здесь - https://stackblitz.com/edit/angular-2chhvd

Ответ принят как подходящий

Я подозреваю, что проблема связана с тем, что ваша полезная нагрузка (проект) представляет собой массив.

Это должно работать нормально: {{project.taskName [0] .taskName | json}}

надеюсь, это поможет

Спасибо за помощь, дружище, но по-прежнему ничего не возвращено. Что еще я мог бы попробовать?

Sharkows Abel 31.10.2018 11:56

Подождите, вы отобразите project.taskName и получите массив? Тогда, может быть, {{проект. taskName [0] .taskName | json}} Может быть, структуру полезной нагрузки можно улучшить. Был бы у вас родственный класс? Это может помочь понять модель.

Florian Bastianelli 31.10.2018 11:59

Это прекрасно работает! Большое спасибо за твою помощь, дружище

Sharkows Abel 31.10.2018 12:01

Этот код работает для меня

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>

Другие вопросы по теме