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

Question

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

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

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

Answer 1

您可以简单地将它绑定(bind)到您的 <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