Использование глобальной переменной TypeScript с функциями SharePoint

Question

Используя TypeScript и Angular, я создал функцию с именем getTasks(), которую я хочу запускать при закрытии модального окна.Это функция:

getTasks() {
 this.http.get(`https://example.com/_api/web/lists/getbytitle('Tasks')/items`).subscribe(data => {
  console.log(data['value'])
  this.tasks = data['value']
 })
}

Я могу успешно создать мой модал со следующим:

newTask() {
  var options = {
    url: `https://example.com/divisions/dev/lists/Tasks/NewForm.aspx?itemParent=${this.itemID}`,
    dialogReturnValueCallback: Function['createDelegate'](null, this.newTaskClosed)
  }
  window.parent['SP'].UI.ModalDialog.showModalDialog(options);
}

Это моя функция обратного вызова, которая успешно регистрирует, когда модал был закрыт:

newTaskClosed(result, value) {
  console.log(result, value)
  this.getTasks(); // Thinks that 'this' is null
}

Выполнение этого дает мне следующую ошибку:

Uncaught TypeError: Невозможно прочитать свойство 'getTasks' с нулевым значением

Как я могу решить эту проблему?

Answer 1

Я решил это, используя этот ответ в качестве отправной точки.Используя функцию стрелки для свойства dialogReturnValueCallback, я смог сохранить правильный контекст this.У меня также был успех со ссылкой на this.getTasks() через переменную, которая связывает this.

Изменение объекта options на:

let options = {
  url: `https://portal.oldnational.com/divisions/it/iDemand/lists/Tasks/NewForm.aspx?itemParent=${this.itemID}`,
  dialogReturnValueCallback: () => this.getTasks()
}

или с помощью

let boundFunction = (function() {
  this.getTasks();
}).bind(this);

let options = {
  url: `https://portal.oldnational.com/divisions/it/iDemand/lists/Tasks/NewForm.aspx?itemParent=${this.itemID}`,
  dialogReturnValueCallback: boundFunction
}

работал на меня.

Answer 2

Я не получил ошибку при тестировании в своей среде.

Тестовая демонстрация:

private newTask= (): void =>{
    var options = {
      url: this.props.context.pageContext.web.absoluteUrl+`/lists/ParentA/NewForm.aspx`,
      dialogReturnValueCallback: Function['createDelegate'](null, this.newTaskClosed)
    }    
    window.parent['SP'].UI.ModalDialog.showModalDialog(options);
  }
  private newTaskClosed= (result, value): void => {
    console.log(result, value);    
    this.getTasks(); // Thinks that 'this' is null
  }
  private getTasks= (): void => {
    alert('getTasks function')
   }

В функции Render вызовите диалоговое окно.

return (     
      <div >  
        <Button text="NewTask" onClick={this.newTask} />