Question

如何更改＆lt; button＆gt;的文本？当在angular2中单击该按钮时？

例如，将按钮文本从“保存”更改为“正在保存...”，然后将其设置为禁用。

我知道如何在AngularJS，jQuery和普通JS中做到这一点，我对如何在Angular2中做到这一点有一些想法，但我想确保我不是以一些过时或复杂的方式做到这一点它来到Angular2。

Answer 1

<button (click)="setSaving($event.target, 'saving')">save</button>

然后在你的组件中：

setSaving(element, text){
  element.textContent = text;
  element.disabled = true;
}

您还可以使用Renderer

设置属性

Answer 2

以下是适用于我的异步调用示例：

模板：

<button (click)="loadMore($event.target)">load more</button>

组件（伪代码）：

export class MyComponent{

    button;

    constructor(private _apiService: ApiService){}

    ngOnInit()
    {
        this.load();
    }

    load()
    {
        this._apiService
            .getAsyncFrom( '/sample/url' )
            .subscribe(data=> {

                // do something with your data

                // enable it
                if(this.button)
                {
                    this.button.textContent = 'load more';
                    this.button.disabled=false;
                }
            });
    }

    loadMore(element)
    {    
        // assign to class
        this.button = element;

        //disable it
        this.button.textContent = 'loading...';
        this.button.disabled=true;

        this.load();
    }
}

基本上将元素分配给类并在需要的地方访问它。

如何在angular2中更改按钮文本并禁用单击事件上的按钮

2 个答案: