Question

我的模板有一个button

<button #showTmplButton (click)="showTemplate()">Show Template </button>

我正在组件类中获取按钮的引用，我想切换按钮的文本，但无法这样做。我在做什么错了？

@ViewChild("showTmplButton") showTmplButton:ElementRef;

  showTmpl:boolean=false;

  constructor(private renderer:Renderer2, hostElementRef:ElementRef){

  }



  showTemplate(){
    this.showTmpl=!this.showTmpl;
    if(this.showTmpl){
      this.renderer.setAttribute(this.showTmplButton.nativeElement,"value","Hide Template")
    } else {
      this.renderer.setAttribute(this.showTmplButton.nativeElement,"value","Show Template")
    }
  }

我也尝试过renderer.setProperty，但是那也不起作用。

我总是在按钮上看到Show Template

Answer 1

您要在<button>中更改的值不是来自value属性，而是来自按钮标记之间的测试。要更改它，它比您想的要容易，您所要做的就是为要更改的值设置一个文本，然后将其放在HTML的插值中。
代码：

valueOfButton = "Show Template";

showTemplate(){
    this.showTmpl=!this.showTmpl;
    if(this.showTmpl){
      this.valueOfButton = "Hide Template"
    } else {
      this.valueOfButton = "Show Template"
    }
  }

HTML：

<button (click)="showTemplate()">{{valueOfButton}}</button>

编辑：
另外，您甚至不需要一个变量，只需执行以下操作即可：

<button value="Show Template" #btn (click)="showTemplate(btn)">{{btn.value}}</button>

以及您的代码中

showTemplate(btn){
    this.showTmpl=!this.showTmpl;
    if(this.showTmpl){
      btn.value = "Hide Template"
    } else {
      btn.value = "Show Template"
    }
  }

无法在Angular中更改按钮的文本

1 个答案: