是否可以根据条件更改 Angular 中按钮的标签？

Question

我在表单的不同步骤中使用了以下按钮。

<div class="col-2">
 <button class="main-buttton" (click)="increment()" label='Next' type='button' *ngIf="isShownNextButton"> 
 </button>
</div>

在倒数第二步，我想修改按钮的标签指令的值，以便它根据我在 ts 中控制的布尔值显示其他文本。

这是否可能，这样我就不必实现另一个按钮并根据我所处的步骤显示一个或另一个按钮？

提前致谢

Answer 1

有什么反对在 typescript 控制器中使用标签条件逻辑而只在 html 中使用变量的吗？ <button [label]='labelVariable' ...> </button>

Answer 2

你可以使用类似的东西：

HTML

<div class="col-2">
 <button class="main-buttton" (click)="increment()"  type='button'> 
   {{isShownNextButton ? 'Text if true' : 'Text if false`enter code here`'}}
 </button>
</div>

component.ts 在您的组件中，您可以使用一个字段。例如：

@Component()
export class SomeComponent{
  isShownNextButton: boolean= false;
}

是否可以根据条件更改 Angular 中按钮的标签？

Is it possible to change the label of a button in Angular depending on a condition?

label

button

angular-directive

angular