当通过服务获取数据到组件时，Angular5中的UNDENABLE变量

Question

我被困在Angular 5

中的学习Crud操作的阶段

我已经尝试了几个小时，但无济于事，看来我无法解决错误。

当我订阅来自服务的数据并尝试使用推送插入数据时。它说不确定。

addtasks.component.ts

import { Component } from '@angular/core';
import { AddTaskService } from '../../services/add-task.service';
import { Tasks } from '../../../Tasks/Tasks';
@Component({
  selector: 'app-addtasks',
  templateUrl: './addtasks.component.html',
  styleUrls: ['./addtasks.component.css']
})
export class AddtasksComponent  {
  tasks: Tasks[];
  title: string;
  constructor(private addTaskService: AddTaskService) { 
    console.log("Add tasks page has been accessed...");
  }
  addTasks(event){
    event.preventDefault();
    var newTask = {
        title: this.title,
        isDone: false
    };
    this.addTaskService.addTask(newTask).subscribe(task => {
        this.tasks.push(task);
        this.title = '';
    });
  }
}

add-task.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class AddTaskService {
  constructor(private http: Http) { console.log("Add Task service initialized..."); }

  addTask(newTask){
    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    console.log(newTask);
    return this.http.post('http://localhost:2200/api/tasks', JSON.stringify(newTask), {headers: headers})
        .map(res => res.json());
  }
}

模型

tasks.ts

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

我的控制台中显示的错误

TypeError columnnumber：13文件名： " http：//localhost：2200/main.bundle.js"亚麻布：193消息： " _this.tasks不确定"堆栈： " ../../../../../../../../src/app/app/components/addtasks/addtasks.component.ts/addtasks.component.prototype.addtasks.addtasks/<@http;@http://localhost:2200/main.bundle。n ../../../../rxjs/_esm5/subscriber.js/subscriber.protype.__next@http：//localhost：2200/vendor.bundle.js：1585：1585：9 n ../。./../../../../rxjs/_esm5/subscriber.js/subscriber.protype.next@http://localhost:2200/vendor.bundle.js:1549:1549:1549:13 n../../../rxjs/_esm5/operators/map.js/mapsubscriber.prototype.__next@http://localhost:2200/vendor.bundle.js:4978:4978:9 n../../../rxjs/_esm5/subscriber.js/subscriber.prototype.next@http：//localHost：2200/vendor.bundle.js：1549：13 nonload@http：//http：//localhost：2200/vendor.bundle.js：756626：756626：756626：756626：756626：756626：756626：21 n ../../../../ZONE.JS/dist/dist/dist.js/http：//localhost：2200/polyfills.bundle.js：2504：17 nonInvoketask@http：//http：//localhost：2200/vendor.bundle.js：53623：24 n ../../../../../ZONE.JS/DIST/DIST/ZONE.JS/http：//http：//localhost：2200/polyfills.bundle.js：2503：17 n ../../../../ZONE.JS/DIST/ZONE.JS/http：//localhost：2200/polyfills.bundle.js：2271：28 n ../。./../../../../zone.js/dist/zone.js/http://localhost:2200/polyfills.bundle.js:2578:24 ninvoketask@http://localhost:2200/polyfills.bundle。JS：3619：9 nglobalzoneawarecallback@http：//localhost：2200/polyfills.bundle.js：3645：17 n __proto ：object {stack："，…}

Answer 1

您应该在使用它之前初始化tasks变量。在构造函数函数中初始化它。

constructor(private addTaskService: AddTaskService) { 
    console.log("Add tasks page has been accessed...");
    this.tasks = [];
  }

这就是为什么您有错误说它不确定的原因。