TypeError Undefined variable in angular5 when fetching data through service to component

Question

I am stuck at the phase of learning CRUD operation in Angular 5

I have been trying for hours but no avail, it seems i can't solve the error.

When I subscribe data which comes from service and try to insert data using push. It says undefined.

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());
  }

}

Model

Tasks.ts

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

The error showing in my console

TypeError columnNumber: 13 fileName: "http://localhost:2200/main.bundle.js" lineNumber: 193 message: "_this.tasks is undefined" stack: "../../../../../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: Object { stack: "", … }

Adrian Adrian · Accepted Answer · 2017-12-27T02:56:17

You should initialize tasks variable before using it. Initialize it in the constructor function.

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

That's why you have an error saying its undefined.

TypeError Undefined variable in angular5 when fetching data through service to component

1 Answers