Angular 2中如何实时更新ngIf绑定变量以自动隐藏取消按钮

方案1：使用RxJS定时检查（推荐） #

利用RxJS的interval每隔一段时间检查订单是否还在可取消窗口期，同时在组件销毁时清理订阅，避免内存泄漏。

修改order-card.component.ts：

import { interval, Subscription } from 'rxjs';
import { takeWhile } from 'rxjs/operators';

canBeCanceled = false;
private checkSubscription?: Subscription;

ngOnInit() {
  // 初始化状态判断
  this.updateCancelStatus();
  
  // 每隔10秒检查一次（可根据需求调整检查间隔）
  this.checkSubscription = interval(10000)
    .pipe(
      takeWhile(() => this.canBeCanceled) // 一旦不可取消就停止订阅，减少不必要的检查
    )
    .subscribe(() => {
      this.updateCancelStatus();
    });
}

private updateCancelStatus() {
  // 修正原逻辑：创建订单后10分钟内可取消，所以判断条件是小于10分钟
  this.canBeCanceled = moment().diff(this.order.createdAt, 'minutes', true) < 10;
}

ngOnDestroy() {
  // 组件销毁时清理订阅，防止内存泄漏
  this.checkSubscription?.unsubscribe();
}

方案2：计算剩余时间，设置一次性定时器 #

如果不想频繁执行检查逻辑，可以直接计算距离10分钟到期的剩余时长，设置一个一次性定时器，到期后直接更新状态。

修改order-card.component.ts：

canBeCanceled = false;
private cancelTimer?: NodeJS.Timeout;

ngOnInit() {
  const elapsedMinutes = moment().diff(this.order.createdAt, 'minutes', true);
  if (elapsedMinutes < 10) {
    this.canBeCanceled = true;
    // 计算到10分钟到期的剩余毫秒数
    const remainingMs = (10 - elapsedMinutes) * 60 * 1000;
    // 设置定时器，到期后自动隐藏按钮
    this.cancelTimer = setTimeout(() => {
      this.canBeCanceled = false;
    }, remainingMs);
  } else {
    this.canBeCanceled = false;
  }
}

ngOnDestroy() {
  // 组件销毁时清理定时器
  clearTimeout(this.cancelTimer);
}

模板代码（无需大改） #

order-card.component.html保持原有逻辑即可：

<button *ngIf="canBeCanceled">Cancel</button>

注意：原代码的判断逻辑完全写反了！moment().diff(...) > 10会导致只有超过10分钟才显示取消按钮，和需求“前10分钟内可取消”相悖，必须改成< 10才能实现正确功能。

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