Javascript 如何将按钮文本设置为角度反应形式

我有一个表单，可以创建新记录或更新现有记录。现在按钮的文本是submit。根据我是否使用可选参数调用表单，在我的情况下，该参数是要编辑的记录的id，我将表单模式设置为create或update。我想要的是能够将显示的文本设置为“创建”或“更新”，但我还没有找到从控制器更改文本的方法。我可以设置所有字段值并启用或禁用“提交”按钮，但尚未找到设置按钮上文本的方法。可以这样做吗？如果没有，ts文件中是否有解决方法

 export class AppComponent  {
      buttontext="Create"
      name = 'Angular';
    }  

在HTML文件中

  <button>{{buttontext}}</button>

app.module.ts

app.component.ts

app.component.html

开始编辑以查看发生的奇迹：）

---

看到这个-

你能分享你的代码吗？你是否尝试过使用ngModel作为按钮的标签，并根据ts文件中的逻辑对其进行更改？否我没有尝试ngModel，因为我认为这将是一种更基于模板的方式，而不是被动的方式。在我看来，这类似于模板表单。我可以在FormGroup等的基于反应的表单中使用它吗？好吧，你应该尝试一下，并在评论中告诉我。我想它应该可以工作，但它不是我想要的。我正在寻找一种方法，通过控制器中的代码直接设置submit按钮的文本，而不是通过HTML文本的占位符form@MisterniceGuy更新了我的答案，看看这是否是你想要的

import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';

@Directive({ selector: '[myHidden]' })
export class HiddenDirective {

    constructor(public el: ElementRef,private renderer: Renderer2) {}

    @Input() myHidden: boolean;

    ngOnInit(){
        // Use renderer to render the emelemt with styles
        console.log(this.myHidden)
        if(this.myHidden) {

           this.renderer.setProperty(this.el.nativeElement, 'innerHTML', 'Create');
        }

        else{
           this.renderer.setProperty(this.el.nativeElement, 'innerHTML', 'Delete');
        }
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { HiddenDirective } from './customdirective';
@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent,HiddenDirective ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { Component } from '@angular/core';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      val="true";
      name = 'Angular';
    }

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)


</p>



<button [myHidden]="val"></button>