Код машинописного текста в функции обратного вызова jQuery

Question

Я хочу поместить машинописный код в функцию обратного вызова jQuery.Это угловой 6-компонентный файл TS.Я использую Material DataTable в качестве шаблона HTML.Когда я нажимаю кнопку, я хочу сначала позволить исчезновению строки, затем обновить mongoDB, а затем переназначить мою таблицу данных.

Прямо сейчас в этой последовательности fadeOut не работает должным образом, потому что функция обновления невнутри функции обратного вызова jQuery (я думаю).

Может кто-нибудь, пожалуйста, пролить немного света?

Thx

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>

Answer 1

Вы не используете функцию готовности.Цитата из jQuery API Docs :

Описание: Укажите функцию, которая будет выполняться при полной загрузке 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;
    });
  });
}