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 = '';
    });
  }

}

添加-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：//本地主机：2200 / polyfills.bundle.js：2504：17 \ nonInvokeTask @ { {3}} \ n ../../../../ zone.js / DIST / zone.js / HTTP：//本地主机：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：//本地主机：2200 / polyfills.bundle.js：2578：24 \ ninvokeTask @ http://localhost:2200/vendor.bundle.js:53623:24 \ nglobalZoneAwareCallback @ http://localhost:2200/polyfills.bundle.js:3619:9 \ n”个 __proto ：Object {stack：“”，...}

Answer 1

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

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

这就是为什么你有一个错误说未定义的原因。

当通过服务将数据提取到组件

1 个答案: