Javascript 为什么Angular services在setTimeout和setInterval内不工作？

创建待办事项.component.html

<p>create-to-do works!</p>
<form #todoForm="ngForm">
    <input type="text" name="task_name" palceholder="Task Name" [(ngModel)]="todo_service.selected_todo.name">
    <input type="text" name="description" palceholder="describe" [(ngModel)]="todo_service.selected_todo.description">
    
</form>

共享\todo.ts

import { Component, OnInit } from '@angular/core';
import {NgForm} from '@angular/forms'
import {TodoService} from '../shared/todo.service';
import {Todo} from '../shared/todo';

@Component({
  selector: 'app-create-to-do',
  templateUrl: './create-to-do.component.html',
  styleUrls: ['./create-to-do.component.css'],
  providers:[TodoService]
})
export class CreateToDoComponent implements OnInit {

  constructor(public todo_service : TodoService) { }
  
  
  ngOnInit(): void {
    console.log(' in ngOnInit function ');
    // yaha pr hm condition check krnge using set interval
    this.todo_service.selected_todo={
      name : "",
      description : ""
    };

   
   console.log(this.todo_service.selected_todo)
     let timerId  = setInterval(function(){
       console.log(this.todo_service.selected_todo);
       if(this.todo_service.selected_todo.name!="" && this.todo_service.selected_todo.description!=""){
         console.log(this.todo_service.selected_todo);
         clearTimeout(timerId);
       }
     },100);
  }

}

export class Todo {

    name : String;
    description : String;
    
}

import { Injectable } from '@angular/core';

import  {Todo} from './todo';

@Injectable({
  providedIn: 'root'
})
export class TodoService {
   
  selected_todo : Todo;
  todos : Todo[]=[];

  constructor() { }
}

共享\todo.service.ts

import { Component, OnInit } from '@angular/core';
import {NgForm} from '@angular/forms'
import {TodoService} from '../shared/todo.service';
import {Todo} from '../shared/todo';

@Component({
  selector: 'app-create-to-do',
  templateUrl: './create-to-do.component.html',
  styleUrls: ['./create-to-do.component.css'],
  providers:[TodoService]
})
export class CreateToDoComponent implements OnInit {

  constructor(public todo_service : TodoService) { }
  
  
  ngOnInit(): void {
    console.log(' in ngOnInit function ');
    // yaha pr hm condition check krnge using set interval
    this.todo_service.selected_todo={
      name : "",
      description : ""
    };

   
   console.log(this.todo_service.selected_todo)
     let timerId  = setInterval(function(){
       console.log(this.todo_service.selected_todo);
       if(this.todo_service.selected_todo.name!="" && this.todo_service.selected_todo.description!=""){
         console.log(this.todo_service.selected_todo);
         clearTimeout(timerId);
       }
     },100);
  }

}

export class Todo {

    name : String;
    description : String;
    
}

import { Injectable } from '@angular/core';

import  {Todo} from './todo';

@Injectable({
  providedIn: 'root'
})
export class TodoService {
   
  selected_todo : Todo;
  todos : Todo[]=[];

  constructor() { }
}

实际上，我想在填写完表单字段后运行一些函数，而不需要任何提交按钮。为此，我使用setInterval，以便它可以检查我的

todo\u服务。选中的\u todo

字段，如果所有字段都不等于空字符串，则我将执行一些操作，但在

setInterval

内，我收到错误，因为

无法读取未定义的属性“selected\u todo”

。

---

作为web开发人员的新手，我无法确定出现此错误的原因。

尝试以下方法以了解问题：

let self = this;
let timerId  = setInterval(function(){
       console.log(self.todo_service.selected_todo);
       if(self.todo_service.selected_todo.name!="" && self.todo_service.selected_todo.description!=""){
         console.log(self.todo_service.selected_todo);
         clearTimeout(timerId);
       }
     },100);

或者用一种更优雅的方式来解决这个问题：

let timerId  = setInterval(() => {
       console.log(this.todo_service.selected_todo);
       if(this.todo_service.selected_todo.name!="" && this.todo_service.selected_todo.description!=""){
         console.log(this.todo_service.selected_todo);
         clearTimeout(timerId);
       }
     },100);

有关在

setInterval

函数和作为回调调用的任何其他函数中访问时，为什么

this

未引用类实例的更多信息，请查看此处的文档：

与其他语言相比，函数的this关键字在JavaScript中的行为稍有不同。严格模式和非严格模式也有一些区别

在大多数情况下，它的值取决于函数的调用方式（运行时绑定）。它不能在执行期间通过赋值进行设置，每次调用函数时可能会有所不同。ES5引入了bind（）方法来设置函数this的值，而不管它是如何调用的

---

尝试以下方法来了解问题：

let self = this;
let timerId  = setInterval(function(){
       console.log(self.todo_service.selected_todo);
       if(self.todo_service.selected_todo.name!="" && self.todo_service.selected_todo.description!=""){
         console.log(self.todo_service.selected_todo);
         clearTimeout(timerId);
       }
     },100);

或者用一种更优雅的方式来解决这个问题：

let timerId  = setInterval(() => {
       console.log(this.todo_service.selected_todo);
       if(this.todo_service.selected_todo.name!="" && this.todo_service.selected_todo.description!=""){
         console.log(this.todo_service.selected_todo);
         clearTimeout(timerId);
       }
     },100);

有关在

setInterval

函数和作为回调调用的任何其他函数中访问时，为什么

this

未引用类实例的更多信息，请查看此处的文档：

与其他语言相比，函数的this关键字在JavaScript中的行为稍有不同。严格模式和非严格模式也有一些区别

在大多数情况下，它的值取决于函数的调用方式（运行时绑定）。它不能在执行期间通过赋值进行设置，每次调用函数时可能会有所不同。ES5引入了bind（）方法来设置函数this的值，而不管它是如何调用的

---

使用箭头函数而不是函数表达式setInterval（（）=>…），以便它将绑定到当前类contex@Chellappanவ 感谢您，它工作正常。请使用箭头函数而不是函数表达式setInterval（（）=>…），以便它将绑定到当前类contex@Chellappanவ 谢谢你，成功了。