无法在 Angular 的 GET 请求中显示在 Chrome [object Object] 中答案

【问题标题】：Unable to display in Chrome [object Object] in GET request with Angular无法在 Angular 的 GET 请求中显示在 Chrome [object Object] 中
【发布时间】：2019-04-10 12:35:57
【问题描述】：

我正在构建应用程序，它向服务器发送 GET 请求，接收项目列表作为响应并将它们显示在页面上。我可以在控制台中看到值，但在 chrome 中我看到的是 [object][Object],[object][Object]，而不是值。

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],[object Object],[object Object]

一些任务：[object Object]

我得到的值不是 [object][Object]，请帮助我解决这个问题。提前致谢。

【问题讨论】：

您尝试显示对象，而您需要在模板中显示字符串。所以选择你想在对象中显示的内容，而不是仅仅输出整个对象。
如果您想查看整个对象，请直接JSON.stringify。
你在哪里声明taskss？
显示console.log(' tasks are :', this.tasks);行的值？
在我的控制台中我可以看到值：任务是：(3) [{...}, {...}, {...}]0: isDone: falsetitle: "walk the dog"id : "5cac8bbdfb6fc01d56637c2d"proto: Object1: isDone: falsetitle: "go food shopping"_id: "5cac8c2ffb6fc01d56637c84"proto: Object2: isDone: falsetitle: "read a book"_id : "5cac8c55fb6fc01d56637ca3"proto: Objectlength: 3__proto_: Array(0) @PrashantPimpale

标签： angular angular-ui-router mean-stack

【解决方案1】：

因为在您的模板中，当您引用task 时，您实际上是在引用对象，而不是对象的属性。如果任务具有“名称”或“标签”属性并且您需要对值进行字符串插值，那么您将在模板中使用 {{ task.name }}

【讨论】：

【解决方案2】：

当您需要在 HTML 模板中打印对象时，您只需将其转换为 JSON。

{{task| json}}

【讨论】：

【解决方案3】：

forloop 内部使用：

{{task.title}}

或将类更改为：

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

Working Demo

【讨论】：

是的，我在 chrome 控制台的 task.component.ts 中也有数据，但它没有显示页面。我错过了什么吗，我尝试了许多其他解决方案，但没有一个对我有用。请帮忙。