时间戳

首页 > 解决方案 > 如何以角度反应形式设置按钮文本

javascript - 如何以角度反应形式设置按钮文本

问题描述

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

标签： javascriptangular

解决方案

在你的 ts 文件中。

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

在您的 HTML 文件中

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

您可以相应地更改按钮文本。在您的功能中

见这里 - https://stackblitz.com/edit/angular-wsxkz9

如果您正在寻找其他解决方案，则必须创建自己的directive

CustomDirective.ts 文件

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');
        }
    }
}

app.module.ts

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 { }

app.component.ts

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

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

app.component.html

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


</p>



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

看到这个 - https://stackblitz.com/edit/angular-ktf7e3

推荐阅读