はTypeError未定義の変数コンポーネント

Question

にサービスを介してデータをフェッチするとき、私は、私は時間のためにしようとしているが、無駄が、私が解決できないようだアンギュラ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 = ''; 
    }); 
    } 

} 

アドオン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/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：オブジェクト{スタック： ""、...}

Answer 1

あなたはそれを使用する前tasks変数を初期化する必要があります。 コンストラクタ関数で初期化します。

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

これは、定義されていないというエラーが表示された理由です。