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

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>

输出是：

欢迎来到Courier Services这里添加任务设置任务：[object Object]，[object Object]，[object Object]

一些任务：[object Object]

一些任务：[object Object]

一些任务：[object Object]

而不是我作为[对象] [对象]得到的值，请帮我解决这个问题。提前致谢。

Answer 1

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

Answer 2

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

{{task| json}}

Answer 3

内部循环使用：

{{task.title}}

或者将班级更改为：

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

Working Demo