如何禁用具有可观察性的按钮？

Question

如果我的可观察值是false，则我应禁用下一个按钮。

可观察的是dataSource.next（如果有更多数据，则为true，否则为false）。如果没有更多数据，这将禁用按钮并阻止用户导航。

component.html：

<button mat-button (click)="next()" [disabled]="!dataSource.next$ | async">
    <mat-icon>navigate_next</mat-icon>
</button>

但是，尽管为dataSource.next输出的值是正确的，但它不能按预期工作，可能是因为如果值是false而不是true，我想禁用它吗？

例如，当没有更多数据时，dataSource.next为false，但该按钮仍处于启用状态。

解决办法是什么？

Answer 1

将异步管道放在括号中。

<button mat-button (click)="next()" [disabled]="!(dataSource.next$ | async)">
  <mat-icon>navigate_next</mat-icon>
</button>