Question

因此，我的myComponent.component.html中有一个具有click方法的按钮

(click)="myClickMethod()"

controlDetails.component.ts

    @Component({
    selector: 'removed',
    templateUrl: '../templates/myComponent.component.html',
    providers: [DataService]
})
    private DataService: dataService
    myMethod(): void {
      this.controlData = null;
      this.dataService
        .validate()
        .then(specificData => this.controlData = specificData)
        .catch(() => {this.controlData = this.getControlErrorMesssage();});
}

来自myComponent.component.ts，它调用了在其他地方调用后端API的角度服务。

如何在onclick方法开始时禁用该按钮，然后在返回我的API请求时重新启用该按钮？

我的服务

@Injectable()
export class DataService {
    constructor (private http: Http) {}

    private baseUrl = '/api/';  // URL to web api

    validate(id: String): Promise<ControlSpecificData> {
        console.log(this.baseUrl+id);
        return this.http.get(this.validationUrl+id)
            .toPromise()
            .then(response => response.json() as SpecificData)
            .catch(this.handleError);
    }

Answer 1

在这种情况下，您可以使用tap来处理逻辑禁用和启用按钮

类似这样的东西

    return this.http
      .post(`connect/token`, httpParams.toString(), httpOptions)
      .pipe(this.enableBtn = false)
      .pipe(
        tap(res => {
           this.enableBtn = true;
        })
      );

如果您有任何问题，请告诉我

禁用角度单击中的onclick按钮，功能完成后重新启用按钮

1 个答案: