Невозможно отобразить в Chrome [объект Object] в запросе GET с Angular - PullRequest
Новая
       14

Невозможно отобразить в Chrome [объект Object] в запросе GET с Angular

0 голосов
/ 10 апреля 2019

Я собираю приложение, которое отправляет GET-запрос на сервер, получает список элементов в качестве ответа и отображает их на странице. Я могу видеть значения в консоли, но в Chrome вместо значений я вижу [объект] [объект], [объект] [объект].

task.components.ts: 

import { Component } from '@angular/core';
import {TaskService } from '../../services/task.service';
import { Task } from '../../../../Task';

@Component({
  selector: 'app-tasks',
  templateUrl: './tasks.component.html',
  styleUrls: ['./tasks.component.css']
})
export class TasksComponent  {
  tasks: Task[];
  constructor(private taskService: TaskService) {
    this.taskService.getTaskProducts()
    .subscribe(tasks => {
      console.log(' tasks are :', this.tasks);

      const finalArray = [];
      Object.keys(tasks).forEach(key =>
        finalArray.push(tasks[key]));
      this.tasks = finalArray;
      console.log(' tasks are :', this.tasks);
   });
  }
  }

Я создал файл Task.ts: 

export class Task {
  titile: string;
  isDone: boolean;
}

tasks.component.html: 

    <form class="well">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Add tasks here">
  </div>
  </form>
  <div class = "task-list">
set task : {{tasks}}
    <div *ngFor ="let task of tasks">
    <div class="col-md-1">
      <input type="checkbox">
    </div>
    <div class="col-md-7">
      some tasks  :
      {{task}}
    </div>
    <div class="col-md-4">
      <a href="#" class="btn btn-primary a-btn-slide-text">
        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
        <span><strong>Edit</strong></span>
    </a></div>
    </div>
  </div>

вывод:

добро пожаловать в курьерские службы Добавить задачи здесь поставленная задача: [объект объекта], [объект объекта], [объект объекта]

некоторые задачи: [объект Object]

некоторые задачи: [объект Object]

некоторые задачи: [объект объекта]

вместо значений, которые я получаю как [объект] [объект], пожалуйста, помогите мне решить эту проблему. заранее спасибо.

Ответы [ 3 ]

1 голос
/ 10 апреля 2019

Потому что в вашем шаблоне, когда вы ссылаетесь на task, вы на самом деле ссылаетесь на объект , а не на свойство объекта. Если у задачи есть свойство 'name' или 'label' и вам нужно было интерполировать значение в строке, то вы должны использовать {{ task.name }} в шаблоне

0 голосов
/ 10 апреля 2019

когда вам нужно напечатать объект в вашем HTML-шаблоне, вам просто нужно преобразовать его в JSON.

{{task| json}}
0 голосов
/ 10 апреля 2019

Внутри использования петли: 

{{task.title}}

ИЛИ измените класс следующим образом: 

export class Task {
  title: string;
  isDone: boolean;
}

Working Demo

...