通过服务到组件获取数据时，Angular5中的TypeError未定义变量

Question

我陷入了在Angular 5中学习CRUD操作的阶段

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

当我订阅来自服务的数据并尝试使用push插入数​​据时。 它说未定义。

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 fileName：“ http：// localhost：2200 / main.bundle.js ” lineNumber：193消息：“ _ this.tasks未定义”堆栈：“ ../../../../ .. /src/app/components/addtasks/addtasks.component.ts/AddtasksComponent.prototype.addTasks/<@ http：// localhost：2200 / main.bundle.js：193：13 \\ n .. / ... /../rxjs/_esm5/Subscriber.js/SafeSubscriber.prototype。tryOrUnsub @ http：// localhost：2200 / vendor.bundle.js：1697：13 \\ n ../../../../ rxjs /_esm5/Subscriber.js/SafeSubscriber.prototype.next@ http：// localhost：2200 / vendor.bundle.js：1644：17 \\ n ../../../../ rxjs / _esm5 / Subscriber。 js / Subscriber.prototype._next @ http：// localhost：2200 / vendor.bundle.js：1585：9 \\ n ../../../../ rxjs / _esm5 / Subscriber.js / Subscriber.prototype .next @ http：// localhost：2200 / vendor.bundle.js：1549：13 \\ n ../../../../ rxjs / _esm5 / operators / map.js / MapSubscriber.prototype._next @ http：// localhost：2200 / vendor.bundle.js：4978：9 \\ n ../../../../ rxjs / _esm5 / Subscriber.js / Subscriber.prototype.next @ http：// localhost ：2200 / vendor.bundle.js：1549：13 \\ nonLoad @ http ：// localhost：2200 / vendor.bundle.js：75626：21 \\ n ../../../../ zone.js / dist / zone.js / http：// localhost：2200 / polyfills。 bundle.js：2504：17 \\ nonInvokeTask @ http：// localhost：2200 / vendor.bundle.js：53623：24 \\ n ../../../../ zone.js / dist / zone.js /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 ：对象{stack：” “，…}

Answer 1

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

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

这就是为什么您在说其未定义时出错。