angular - 如何禁用带有 observable 的按钮？

Question

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

可观察到的是 dataSource.next (如果有更多数据 - next 为真，否则为假)。如果没有更多数据，这将禁用按钮并阻止用户导航。

组件.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>