Question

当我点击此按钮时，我想要更改标签。 HTML：

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

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

Answer 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语法已更改为开始使用属性绑定，其中＆＃34;标签＆＃34;与button元素关联的节点的属性正在使用组件中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

Answer 2

您可以通过[attr.myAttribute]指令绑定属性，因为您必须使用[attr.label]将值绑定到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>

Answer 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

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

3 个答案: