如何禁用带有observable的按钮？

Question

如果我的observable值为false，我有一个应该被禁用的下一个按钮。

observable是dataSource.next（如果有更多数据 - 接下来是真的，否则它是假的）。如果没有更多数据，这将禁用该按钮并阻止用户导航。

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>