Question

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

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

有人可以解释一下吗？

THX

＆＃13;

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

＆＃13;

...

<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>

＆＃13;

Answer 1

您错过了就绪功能。引自 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;
    });
  });
}

jQuery回调函数中的Typescript代码

1 个答案: