角2+使用Alertifyjs错误TypeError:无法读取属性

Question

declare var alertify:any;
export class ExamplComponent implements OnInit {
    itemList = []

    deleteItem(idx) {
    alertify.confirm('Are you sure delete this record.', function() {
      this.itemList.slice(idx,1);
    })
  }
}

html页面

< div *ngFor="let item of itemList;let indx = index" style="text-align: center">
    <button class="text-btn text-danger" (click)="deleteItem(indx)" ><i class="fa fa-trash"></i></button>
</div>

来源库：https://alertifyjs.com/confirm.html 错误消息

ERROR TypeError: Cannot read property 'itemList' of undefined

Answer 1

使用fat arrow =>而不是function

deleteItem(idx) {
    alertify.confirm('Are you sure delete this record.', ()=> {
      this.itemList.slice(idx,1);
    })
}

Answer 2

问题在于作为参数传递给alertify.confirm()的函数。在本例中，当您使用function()声明一个函数时，它有它自己的this；因此，当您编写this.itemList代码时，您将指向undefined，因为它并不存在于您的函数中。

尝试使用箭头函数(() => {})，它们从当前作用域继承this，因此在回调中使用是安全的。

deleteItem(idx) {
    alertify.confirm('Are you sure delete this record.', () => {
      this.itemList.slice(idx, 1)
    })
}