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

Question

当我点击这个按钮时，我希望标签发生改变。HTML：

当我点击此按钮时，我希望标签发生变化。

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

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

- anikkinho

---

你尝试使用[attr.label]了吗？ - cyr_x

Answer 1

你可以在 <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';
  }
}

这里有一个可工作的 Plunker：https://plnkr.co/edit/8TOn8oN63pgJ7eA7h7tY?p=preview

- FAISAL

Answer 2

在你的组件类中

@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语法已更改为开始使用属性绑定，其中与按钮元素相关联的节点的“label”属性正在使用组件中的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

- JeanPaul A.

---

这会失败，因为您错过了标签的上下文，它必须在ngOnInit和Foo内部为this.myLabel。我会省略ngOnInit并在初始化时将默认值设置为“编辑”：public myLabel: string = 'Edit'。 - cyr_x

没错，我漏掉了“this.”。非常好的发现。关于ngOnInit，Angular团队建议任何组件的初始化都应该在ngOnInit中完成。对于这种情况，它很琐碎，可以像你提到的那样硬编码或在构造函数中设置。我使用ngOnInit是为了最佳实践（特别是如果组件做更多的事情）。 - JeanPaul A.

同时，[label] 不起作用，您必须使用 [attr.label]。 - cyr_x

@JeanPaulA.，谢谢您！ - anikkinho

Answer 3

您可以通过[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>

- cyr_x

---

它无法工作，因为标签不是按钮的属性。 - FAISAL

他想设置标签属性，这就是这个正在做的事情吗？ - cyr_x

看一下更改按钮文本的情况。这不是你在问题中所陈述的，但我认为这就是你想要的。 - cyr_x

据我所知，他想要更改按钮文本。 - FAISAL

是的，但他在问题中要求更改“label”，而在他的示例中按钮上有一个“label”属性。 - cyr_x

@cyrix 工作正常！谢谢 :) - anikkinho