Question

我正在构建一个应用程序，该应用程序将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]代替值，请帮助我解决这个问题。预先感谢。

Answer 1

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

Answer 2

在forloop内部使用：

{{task.title}}

或将类更改为：

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

Working Demo

Answer 3

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

{{task| json}}

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

3 个答案: