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

【问题标题】：Is it possible to change the label of a button in Angular depending on a condition?是否可以根据条件更改 Angular 中按钮的标签？
【发布时间】：2020-10-22 14:19:32
【问题描述】：

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

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

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

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

提前谢谢你

【问题讨论】：

这是你需要的吗？ [label]="booleanValue ? 'text_if_yes' : 'text_if_false'"

标签： angular button label angular-directive

【解决方案1】：

你可以使用类似的东西：

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;
}

【讨论】：

【解决方案2】：

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

【讨论】：