在条件下禁用按钮

Question

我正在Angular中构建一个自定义分页组件，您只能在其中按"先前的"&quot；下一个"；。

我想禁用"；先前的"；每当索引等于1时；下一个"；按钮，只要索引等于最后一页。我试过用三元运算符和ng if读到的一些不同的东西，但我无法让它发挥作用。

这是我的分页组件：

<div class="btn-group" role="group" aria-label="pagination buttons">
<button mat-icon-button class="vorige-icon" aria-label="vorige icon" (click)="onPrevious()">
<mat-icon>chevron_left</mat-icon>
</button>
<span>{{this.currentPage + 1}} / {{this.totalPages}}</span>
<button mat-icon-button class="volgende-icon" aria-label="volgende icon" (click)="onNext()">
<mat-icon>chevron_right</mat-icon>
</button>
</div>

这是条件：

checkDisabled() {
if (this.currentPage <= 1 || this.currentPage >= this.totalPages) {
this.isDisabled = true;
}

Answer 1

您需要为此使用[disabled]属性

<button mat-icon-button class="vorige-icon" aria-label="vorige icon" (click)="onPrevious()"  [disabled]="currentPage <= 1" >
<mat-icon>chevron_left</mat-icon>
</button>
<button mat-icon-button class="volgende-icon" aria-label="volgende icon" (click)="onNext()" [disabled]="currentPage >= totalPages" >
<mat-icon>chevron_right</mat-icon>
</button>

Answer 2

在HTML中，我们直接使用disabled属性来禁用按钮。在Angular中，我们需要将[disabled]绑定到原生的disable属性。

在PreviousPage((上添加属性

[disabled]="index === 1"

在NextPage((上添加属性

[disabled]="index === lastPage"