angular - 从一个类中的另一个方法调用方法（this.function 不起作用）

Question

我正在使用 Angular 开发我的第一个应用程序，即使在 StackOverflow 和 Internet pages 中多次提到它，我也遇到了问题，但在我的情况下它不起作用。这是我的缩短代码：

export class PropertiesComponent implements OnInit, AfterViewInit {

  constructor(private renderer: Renderer2) {
    this.todoForm = document.getElementById('todo-form');
    this.session1 = sessionStorage.getItem('name');
    this.addInput = document.getElementById('add-input');
    this.todoList = document.getElementById('todo-list');
    this.todoItems = document.querySelectorAll('.todo-item');
    this.oldAddress = '';  
  };

  ngOnInit() {
    document.addEventListener('DOMContentLoaded', function () {
      this.todoForm.addEventListener('submit', this.addTodoItem);
      this.todoItems.forEach(item => this.bindEvents(item));
    });
    this.addresses = this.fetchUserAddreses();
  };
  createElement(tag, properties, ...children) {
    //code here
    return element;
  };

  createTodoItem(title) {
    //code here
    return listItem;
  };

  bindEvents(todoItem) {
    const editButton = todoItem.querySelector('.edit');
    const deleteButton = todoItem.querySelector('.delete');
    editButton.addEventListener('click', this.editTodoItem);
    deleteButton.addEventListener('click', this.deleteTodoItem);
  };

  addTodoItem(event) {
    //code here
  };

  editUserAddress(oldAddress: any, newAddress: any) {
    //code here
  };

  editTodoItem() {
    //code here
    const title = listItem.querySelector('.title');
    ** this.editUserAddress(this.oldAddress, title.innerText); ** //!! error this.editUserAddress(); is not a function
  };

  fetchUserAddreses() {
    //code here
  }
  addUserAddress(event: any) {
    //code here
  }
}

问题出在这一行 this.editUserAddress(this.oldAddress, title.innerText); //!! error this.editUserAddress is not a function ，如果需要，我可以显示我的完整代码。

标签： angulartypescript

Answer 1

尝试使用箭头函数，它将函数绑定到当前实例

editTodoItem = () => {
    const title = listItem.querySelector('.title');
    this.editUserAddress(this.oldAddress, title.innerText);
}