Question

我正在使用可视代码中的角度2，由于某种原因我点击事件无法正常工作。

当我点击f12检查浏览器上的程序时，当我点击按钮时出现此错误：“TypeError：_co.task is undefined”。我不知道_co.task是什么，所以我可以在我的代码中找到它并尝试修复problam。

我的任务列表组件：

export class TaskListComponent {

  constructor(private _taskListService: TaskListServiceService) { }

  btnEnter: string = 'Enter Task';
  task: string;

  Tasks = this._taskListService.taskListItems;

  AddTaskToList(task) {
    this._taskListService.AddToToDoList(task)
  }

我的任务列表服务，我从中保存并加载任务列表并添加到列表功能：

@Injectable()
export class TaskListServiceService {

  constructor() { }

  taskListItems: toDoListItem[] = [
    { content: 'bla bla' },
    { content: "blablabal" }
  ];

   AddToToDoList(task: string) {
     this.taskListItems.push({ content: task })
  }

}

class toDoListItem {
  content: string;
}

模板html：

<div class="container" id="listContainer">
   <listTitle></listTitle>
  <div>
    <ul class="list-group col-lg-6">
      <li href="#" class="list-group-item" *ngFor="let task of Tasks">{{task.content}}</li>
     </ul>
    <input type="text" class="form-control" id="contentOfTask" [(ngModel)]="taskContent" name="content">
    <button class="btn btn-success" (click)=AddTaskToList(task.content)>{{btnEnter}}</button>
  </div>
</div>

Answer 1

类型错误是抱怨任务未定义，它应该是一个字符串。尝试给它一个初始值，看看是否有效。如果没有检查您分配给“任务”的内容，那么请在AddToToDoList(task: string = "test") { console.log(task); // now task should be test unless you send it something. }

中查看

Answer 2

模板中有错误。

(click)=AddTaskToList(task.content)

应该是

(click)="AddTaskToList(task.content)"

Answer 3

你的模板应该是，

(click)=AddTaskToList(task)

，功能应该是，

AddToToDoList(task: string) {
     this.taskListItems.push({ 'content': task.content });
}

Answer 4

好的，我找到了解决问题的方法。

起初我以为我需要在html文件的“AddTaskToList（）”中传递task.content。

然后我在另一个项目中看到我工作了，我通过了ngModel中的内容。因此，当我在输入区域中编写一些任务时，我希望将其添加到任务列表中。

所以我在这个项目中改变的是我在ngModel中使用了“taskContent”并将其放在函数“AddTaskToList（taskContent）”的括号中

Angular 2 - 单击事件非工作对象未定义

4 个答案: