jQuery回调函数中的打字稿代码答案

【问题标题】：Typescript code within jQuery callback functionjQuery回调函数中的打字稿代码
【发布时间】：2018-05-30 00:53:17
【问题描述】：

我想将打字稿代码放在 jQuery 回调函数中。这是一个 Angular 6 组件 ts 文件。我使用 Material DataTable 作为 HTML 模板。当我单击一个按钮时，我想先让行淡出，然后更新 mongoDB，然后重新分页我的数据表。

现在在这个序列中，fadeOut 不能正常工作，因为更新函数不在 jQuery 的回调函数中（我猜）。

有人能解释一下吗？

谢谢

onSetOK(user: USER, i: number) {
  const index = this.dataSource.data.indexOf(user);
  console.log(index);

  //here begins the jQuery code to let the row fadeout
  $().ready(function() {
    const $row = $('#row' + i);
    $row.fadeOut(1000, function(e) {

      $row.remove();
      // put the below typescript code here
    });
  });

  //typescript code, update mongoDB
  this.service.updateUserOK(user).subscribe(res => {

    this.dataSource.data.splice(index, 1);
    this.dataSource.sort = this.sort;

    this.dataSource.paginator = this.paginator;

  });

}

...

<ng-container matColumnDef='Actions'>
  <mat-header-cell *matHeaderCellDef mat-sort-header> Actions </mat-header-cell>
  <mat-cell *matCellDef='let u, let i = index' (click)='$event.stopPropagation()'>
    <button mat-raised-button (click)='onSetOK(u, i)'>
      <i class='fas fa-check fa-2x'></i>
    </button>
  </mat-cell>
</ng-container>

<mat-row *matRowDef='let row; columns: getDisplayedColumns(); let i = index;' attr.id='row{{i}}'></mat-row>

【问题讨论】：

标签： jquery angular typescript angular-material

【解决方案1】：

您误用了 ready 函数。引用自 jQuery API 文档：

描述：指定当 DOM 完全加载时要执行的函数。

因为此时您的 DOM 已完全加载，所以永远不会调用回调。像这样执行你的淡入淡出效果：

onSetOK(user: USER, i: number) {
  const index = this.dataSource.data.indexOf(user);
  console.log(index);

  //here begins the jQuery code to let the row fadeout
  const $row = $('#row' + i);
  $row.fadeOut(1000, (e) => {

    $row.remove();
    // put the below typescript code here

    //typescript code, update mongoDB
    this.service.updateUserOK(user).subscribe(res => {
      this.dataSource.data.splice(index, 1);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
    });
  });
}

【讨论】：