Question

在我的Angular 2应用程序中，我想在等待服务器响应时禁用该按钮。这是我的示例代码：

 this.service.insert(url , this.object).subscribe(

        param => {
             I get answer to server
        },  error => {
            I get message error from server.
        }, () => {
            console.log('All Angular' , this);
        });

Answer 1

您需要在Angular组件中具有一个属性： isBtnDisabled: boolean; 将其添加到课程的顶部。

然后让我们对代码进行一些编辑：

insert(){
    this.isBtnDisabled = true; // you just started the request and want to prevent user from clicking the btn again

    this.service.insert(url , this.object)
        .subscribe(
            param => {
                 // success - you get answer from server
                 // make your app respond to it by showing the message, updating the UI, whatever                 
            },  error => {
                // error - you get error message error from server.
            }, () => {
                // final - will always run
                console.log('All Angular' , this);
                this.isBtnDisabled = false; // make the btn clickable again
            });
}

现在，您需要将isBtnDisabled属性连接到模板中的实际按钮DOM元素

<button (click)="insert()" [disabled]="isBtnDisabled">Insert</button>

因此，如果isBtnDisabled为true，它将在按钮上设置disabled属性。很不言自明。

这只是顶部的一颗樱桃。使用CSS“属性”选择器设置禁用按钮的样式。

button[disabled]{
  cursor: not-allowed;
  opacity: 0.5
}

当我希望在Angular2中显示文本

1 个答案: