Angular6中如何将TypeScript代码放入jQuery回调实现正确执行顺序

我来帮你搞定这个问题！你猜的完全没错——问题核心就是异步执行顺序：你现在的数据库更新代码是在jQuery的fadeOut回调外面，导致动画还没跑完，数据就已经更新了，自然看不到完整的淡出效果。下面是具体的修复方案和解释：

问题分析 #

1. 你用了$().ready()包裹DOM操作，但点击事件触发时，目标行元素早就已经渲染到页面上了，这个包裹完全没必要，反而可能导致选择器找不到元素的延迟。
2. 数据库更新、数据源修改这些操作必须放在fadeOut的回调函数里，这样才能保证动画完全结束后再执行后续逻辑。

修复后的TypeScript代码 #

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

  // 直接获取目标行元素，不需要等待DOM就绪
  const $row = $('#row' + i);
  $row.fadeOut(1000, () => {
    $row.remove();
    // 把所有后续操作放到fadeOut回调里，确保动画完成后执行
    this.service.updateUserOK(user).subscribe(res => {
      // 从数据源中移除对应数据
      this.dataSource.data.splice(index, 1);
      // 通知Material Table数据已变更，自动刷新分页和表格
      this.dataSource._updateChangeSubscription();
      // 也可以用重新赋值data的方式触发变更（更符合Angular风格）：
      // this.dataSource.data = [...this.dataSource.data];
    });
  });
}

关键修改点说明 #

• 移除了多余的$().ready()：点击事件触发时，目标行已经存在于DOM中，不需要额外等待。
• 将数据库更新、数据源修改逻辑全部移入fadeOut的回调函数：确保动画执行完毕后才开始更新数据，避免动画被打断。
• 使用_updateChangeSubscription()或重新赋值data：通知Angular Material Table数据发生变化，自动更新分页器和表格内容。

额外的Angular最佳实践提示 #

如果想更贴合Angular生态，建议用Angular官方的@angular/animations模块实现淡出效果，避免直接用jQuery操作DOM（减少框架冲突风险）：

1. 在组件中定义动画：

import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  // ...其他配置
  animations: [
    trigger('fadeOut', [
      state('in', style({ opacity: 1 })),
      transition('* => void', [
        animate(1000, style({ opacity: 0 }))
      ])
    ])
  ]
})

2. 在模板中绑定动画：

<mat-row 
  *matRowDef='let row; columns: getDisplayedColumns(); let i = index;' 
  attr.id='row{{i}}'
  [@fadeOut]
  (@fadeOut.done)='onRowFadedOut(row, i)'
></mat-row>

3. 然后在组件中实现onRowFadedOut方法，执行数据库更新和数据源修改逻辑。

内容的提问来源于stack exchange，提问作者cella