如何在点击时更改按钮标签？答案

【问题标题】：How to change button label on click?如何在点击时更改按钮标签？
【发布时间】：2017-08-01 09:24:05
【问题描述】：

当我点击这个按钮时，我想改变标签。 HTML：

<button pButton type="button" label="Edit" (click) = "foo()" style="width:auto"></button>

例如：之前-“编辑”，点击，之后-“保存”。

【问题讨论】：

您是否尝试使用[attr.label]？

标签： html angular typescript button

【解决方案1】：

在你的组件类中

@Component({
  templateUrl:'./mytemplate'
})
export class MyComponent implements OnInit {
  myLabel:string;

  ngOnInit() {
    this.myLabel = 'Edit';
  }

  foo() {
    this.myLabel = 'Save';
  }
}

在你的 html 中

<button pButton type="button" [attr.label]="myLabel" (click)="foo()" style="width:auto"></button>

请注意，html 语法已更改为开始使用属性绑定，其中与按钮元素关联的节点的“标签”属性正在更新为组件中 myLabel 变量的值。

在本指南中阅读有关模板和属性绑定的更多信息 https://angular.io/guide/template-syntax#property-binding

附带说明，如果您的要求是更改按钮上显示的文本，我将使用如下插值

<button pButton type="button" (click)="foo()" style="width:auto">{{myLabel}}</button>

查看此 plunkr 以获取工作示例 https://plnkr.co/edit/wEXKxP88kcsLKuBcUUxZ?p=preview

【讨论】：

这将失败，因为您错过了标签的上下文，它必须是 ngOnInit 和 Foo 中的 this.myLabel。我会省略 ngOnInit 并在初始化时将默认值设置为“编辑”：public myLabel: string = 'Edit'.
没错，我错过了“this.”。很好发现。关于 ngOnInit，Angular 团队建议对组件的任何初始化都应该在 ngOnInit 中完成。现在对于这种情况，它是微不足道的，可以像您提到的那样硬编码或在构造函数中设置。我已将 ngOnInit 用于最佳实践目的（特别是如果组件的功能不止于此）
另外[label] 也不起作用，你必须使用[attr.label]。
@JeanPaulA。，谢谢！

【解决方案2】：

您可以通过[attr.myAttribute] 指令绑定属性，并且在您的情况下，您必须使用[attr.label] 将值绑定到标签属性。

在您的组件中，您可以定义一个标签属性，该属性会在点击时切换：

 class MyComponent {
    private labelStates = ['Edit', 'Save'];
    public label: string = this.labelStates[0];

    public toggleLabel() {
       let index = +(this.label === this.labelStates[0]);
       this.label = this.labelStates[index];
    }
 }

并将其用于您的按钮：

<button [attr.label]="label" (click)="toggleLabel()"></button>

如果您想更改按钮文本，请使用：

<button (click)="toggleLabel()">{{ label }}</button>

【讨论】：

它不起作用，因为标签不是按钮的属性。
他要设置标签属性，这就是这个在做什么？
查看更改按钮文本的案例。这不是你在问题中所说的，但我认为这是你想要的。
据我了解，他想更改按钮文本。
是的，但在他的问题中，他要求更改label，在他的示例中，按钮上有一个标签属性。

【解决方案3】：

您可以简单地将它绑定到<button> 标记内的组件变量。

<button pButton type="button" (click)="foo()"> style="width:auto">
     {{myLabel}}
</button>

在你的组件类中：

@Component({
  templateUrl:'./mytemplate'
})
export class MyComponent implements OnInit {
  myLabel:string;

  ngOnInit() {
    this.myLabel = 'Edit';
  }
  foo() {
    this.myLabel = 'Save';
  }
}

这是一个正常工作的插件：https://plnkr.co/edit/8TOn8oN63pgJ7eA7h7tY?p=preview

【讨论】：