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

Question

我是构建应用程序，它向服务器发送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);
   });
  }
  }

我已经创建了任务.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>

输出为 ：

欢迎来到快递服务在此处添加任务设置任务：

[对象对象]，[对象对象]，[对象对象]

一些任务：[对象对象]

一些任务：[对象对象]

一些任务：[对象对象]

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

Answer 1

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

Answer 2

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

{{task| json}}

Answer 3

内部 forloop 使用：

{{task.title}}

或者将类更改为：

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

Working Demo