Angular 2中如何在模板内获取Observable的值控制按钮禁用状态

常见问题及修复方案 #

• 逻辑反向问题
  现有代码逻辑为hasAccess$返回true时按钮禁用，若你的业务需求是「有权限时按钮可用，无权限时禁用」，需要修改模板的判断条件：

  <button [disabled]="!(hasAccess$ | async)"  (click)="add()">
      add new student
  </button>
  

• 初始空值异常问题
  async管道在Observable未返回第一个值时会返回null，该值会被判定为假，导致按钮初始状态不符合预期，可通过两种方式修复：
  1. 组件层给流添加初始值

  import { startWith } from 'rxjs';
  
  public hasAccess$: Observable<boolean>; 
  this.hasAccess$ = this.store.select(hasAccessGetStudentData).pipe(
    startWith(false), // 按业务需求设置初始值，默认无权限可传false，默认禁用可传true
    takeUntil(this.destroy$)
  );
  

  2. 模板层处理空值兜底

  <button [disabled]="(hasAccess$ | async) ?? true"  (click)="add()">
      add new student
  </button>
  

• 数据源校验问题
  若上述修改后还是不符合预期，可临时在组件中订阅流打印返回值，确认hasAccessGetStudentData这个selector的返回值符合预期，避免Store层的逻辑错误。

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