Question

我正在尝试，如果您插入一个新产品，我的应用程序应该有一个延迟（2seg），那么我的按钮将被禁用，直到我的服务器接受或拒绝该插入。

我有2个问题：

1ºTypeError：this.http.post（...）。delay不是一个函数。 2º我无法更改表单状态以禁用按钮。

insert(formModifyConfig: NgForm) {

        const url = 'http://localhost:8080/insert';


        this.service.insert(url , this.product).subscribe(param => {

            let params = JSON.parse(param);
            this.myMessage.success = params.success;
            this.myMessage.message =  params.message;

            if ( this.myMessage.success) {
                this.openModalUpdate = false;
                this.confirmedServer = true;
            } else {
                this.errorServer = true;
            }

        },  error => {
            formModifyConfig.status = false; --> Second error.
           // formModifyConfig.form.invalid = true;  --> Second error.
            this.errorServer = true;
            this.myMessage.message = "Error Server";
        });
   }

//服务角度

  insert(url , product) {
    return this.http.post(url, product , { responseType: 'text'}).delay(2000); --> First error.
  }

我搜索到服务器尝试插入（真或假）“我的按钮”时，应禁用Angular，直到服务器应答为止

html：

<form #insertConfig="ngForm" (ngSubmit)="insert(insertConfig)" class="compact" novalidate>
    <clr-modal [(clrModalOpen)]="openModalUpdate" [clrModalStaticBackdrop]="true">

        <h3 class="modal-title">Insert{{ staticParamName }}</h3>

        <div class="modal-body">

                <clr-alert [clrAlertType]="'alert-danger'" *ngIf="errorServer">
                        <clr-alert-item>
                            <span class="alert-text">
                               {{ this.myMessage.message }}
                            </span>
                        </clr-alert-item>
                     </clr-alert>
            <div class="form-group row">
                <div class="col-xs-4">
                    <label for="nameParameter">Name: </label>
                </div>
                <div class="col-xs-8">
                    <input type="text" id="nameParameter" name="nameParameter" class="form-control" [(ngModel)]="insert.parameter" required>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-xs-4">
                    <label for="description">Description: </label>
                </div>
                <div class="col-xs-8">
                    <input type="text" id="description" name="description" class="form-control" [(ngModel)]="insert.description">
                </div>
            </div>

        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary" [disabled]="insertConfig.form.invalid">Insert</button>
            <button type="button" class="btn btn-outline" (click)="openModalUpdate = false">Cancel</button>
        </div>
    </clr-modal>
</form>

Answer 1

这只是我如何考虑上述用例的一个例子，

在您的组件上创建一个布尔变量，假设serviceCalled = false;
将提交的html更改为

插入

在组件方法中

插入（formModifyConfig：NgForm）{

        serviceCalled=true;

        const url = 'http://localhost:8080/insert';

        this.service.insert(url , this.product).subscribe(param => {
        serviceCalled=false;
        ....
        },(error)=>{
        serviceCalled=false;
        }
        )

在Angular2中使用“禁用”按钮延迟

1 个答案: