将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
}

运行此命令会给我以下错误：

  

未捕获的TypeError：无法读取null的属性“ getTasks”

我该如何解决？

Answer 1

在我的环境中进行测试时，我没有收到错误消息。

测试演示：

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

在“渲染”功能中，调用对话框。

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

Answer 2

我以this answer为起点解决了这个问题。 通过为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
}

为我工作。